chonglingliu
chonglingliu

Vue 3.0组件的渲染流程

Vue简单易上手，只需要简单的文档说明就能上手开发。虽然本人也有一直使用Vue 2.0的项目开发经验，以前也只了解一点核心代码逻辑，没有全面阅读过Vue 2.0的源码。Vue 3.0发布后我也有了一些Vue 3.0项目使用经验，顺藤摸瓜来学习下Vue 3.0源码，向高手学习下编码技巧，以便在项目中更加游刃有余。

由于Vue 3.0使用了TypeScript进行了重构，所以阅读本系列前需要对TypeScript基础语法有所了解，此外需要了解递归调用和函数柯里化等。

Vue 3.0系列文章预估会有20个左右的文章篇幅，每篇文章只会围绕所涉及知识点学习，这样分析起来会比较清晰，否则绕在了一起会很混乱。

如果不想看复杂的分析过程，可以直接看最后的图片总结。

我们经常会使用如下的代码：

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

App就是一个Vue组件,浏览器无法识别这个组件，也不知道如何渲染这组件，那Vue是如何将App组件渲染成真实的DOM呢？本文我们来学习下Vue组件转换成真实DOM的渲染过程。

应用程序初始化

createApp入口函数

export const createApp = ((...args) => {
  // 1. 
  const app = ensureRenderer().createApp(...args)

  // 2. 
  const { mount } = app
  app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    // 省略...
  }

  return app
}) as CreateAppFunction

createApp入口函数主要做了两件事情:

  • 使用ensureRenderer().createApp()创建app对象
  • 重写app的mount方法。
创建app对象
创建渲染器对象

渲染器是具有平台渲染核心逻辑的JS对象。Vue可以做为跨平台渲染，所以不一定是DOM的渲染。

用ensureRenderer()创建一个渲染器对象:

// 渲染器对象
let renderer: Renderer | HydrationRenderer

function ensureRenderer() {
  return (
    renderer ||
    (renderer = createRenderer(rendererOptions))
  )
}

这里先判断有没有渲染器，没有再去创建一个渲染器，属于一个延时创建的方式，只有需要的时候才会去创建渲染器。

渲染器初始化的时候会传入一个渲染配置参数---rendererOptions,它定义了attribute处理方法， DOM操作方法等。

export interface RendererOptions<
  HostNode = RendererNode,
  HostElement = RendererElement
> {
  // 处理Prop，attributes等
  patchProp(
    el: HostElement,
    key: string,
    prevValue: any,
    nextValue: any,
    isSVG?: boolean,
    prevChildren?: VNode[],
    parentComponent?: ComponentInternalInstance | null,
    parentSuspense?: SuspenseBoundary | null,
    unmountChildren?: UnmountChildrenFn
  ): void
  // 插入节点
  insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
  // 省略...
}

虽然开发者不需要直接操作DOM，但是可以猜测到所有的组件会被转换成DOM。渲染器的这个配置参数包含直接操作DOM的方法，因此是非常关键的一个配置。

createRenderer方法内部直接调用baseCreateRenderer方法：

export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions) {
  return baseCreateRenderer(options)
}

baseCreateRenderer方法的代码如下：

function baseCreateRenderer(
  options: RendererOptions,
  createHydrationFns?: typeof createHydrationFunctions
): any {
    
  // 1.    
  const {
    insert: hostInsert,
    remove: hostRemove,
    patchProp: hostPatchProp,
    createElement: hostCreateElement,
    createText: hostCreateText,
    createComment: hostCreateComment,
    setText: hostSetText,
    setElementText: hostSetElementText,
    parentNode: hostParentNode,
    nextSibling: hostNextSibling,
    setScopeId: hostSetScopeId = NOOP,
    cloneNode: hostCloneNode,
    insertStaticContent: hostInsertStaticContent
  } = options

  // 2.
  const patch: PatchFn = (
    n1,
    n2,
    ...
  ) => {}

  const processComponent = (
    n1: VNode | null,
    n2: VNode,
    ...
  ) => {}

  // 省略众多方法...      
  
  const render: RootRenderFunction = (vnode, container, isSVG) => {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPostFlushCbs()
    container._vnode = vnode
  }
  
  // 3. 
  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
}
  1. 首先解构传入的RendererOptions对象options, 然后修改了操作DOM的方法的参数名；
  2. 定义了众多的渲染相关的方法，其中最重要的是render方法。render调用了一个重要的patch方法，patch方法又会调用其他的方法，譬如组件处理相关的processComponent方法。如果某个方法需要操作DOM，那就会调用RendererOptions对象options中的方法。
  3. 最后返回一个包含render和createApp方法的对象。hydrate为undefined。

上面的createApp的值是createAppAPI的函数返回值，那它又是做什么的呢？

export function createAppAPI(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction {
  // 1.
  return function createApp(rootComponent, rootProps = null) {
    // 2.
    if (rootProps != null && !isObject(rootProps)) {
      __DEV__ && warn(`root props passed to app.mount() must be an object.`)
      rootProps = null
    }
    
    // 2.
    const context = createAppContext()
    // 3.
    const installedPlugins = new Set()
    // 4. 
    let isMounted = false
    
    // 5.
    const app: App = (context.app = {
      _uid: uid++,
      _component: rootComponent as ConcreteComponent,
      _props: rootProps,
      _container: null,
      _context: context,
      _instance: null,

      version,

      get config() {
        return context.config
      },

      set config(v) {
      },

      use(plugin: Plugin, ...options: any[]) {
        if (installedPlugins.has(plugin)) {
          __DEV__ && warn(`Plugin has already been applied to target app.`)
        } else if (plugin && isFunction(plugin.install)) {
          installedPlugins.add(plugin)
          plugin.install(app, ...options)
        } else if (isFunction(plugin)) {
          installedPlugins.add(plugin)
          plugin(app, ...options)
        }
        return app
      },

      mixin(mixin: ComponentOptions) {
        if (__FEATURE_OPTIONS_API__) {
          if (!context.mixins.includes(mixin)) {
            context.mixins.push(mixin)
          }
        return app
      },

      component(name: string, component?: Component): any {
        if (!component) {
          return context.components[name]
        }
        context.components[name] = component
        return app
      },

      directive(name: string, directive?: Directive) {
        if (!directive) {
          return context.directives[name] as any
        }
        context.directives[name] = directive
        return app
      },

      mount(
        rootContainer: HostElement,
        isHydrate?: boolean,
        isSVG?: boolean
      ): any {
        if (!isMounted) {
          const vnode = createVNode(
            rootComponent as ConcreteComponent,
            rootProps
          )
          // store app context on the root VNode.
          // this will be set on the root instance on initial mount.
          vnode.appContext = context

          if (isHydrate && hydrate) {
            hydrate(vnode as VNode, rootContainer as any)
          } else {
            render(vnode, rootContainer, isSVG)
          }
          isMounted = true
          app._container = rootContainer
          // for devtools and telemetry
          ;(rootContainer as any).__vue_app__ = app


          return vnode.component!.proxy
        }
      },

      unmount() {
        if (isMounted) {
          render(null, app._container)
          delete app._container.__vue_app__
        }
      },

      provide(key, value) {
        context.provides[key as string] = value

        return app
      }
    })

    if (__COMPAT__) {
      installAppCompatProperties(app, context, render)
    }

    return app
  }
}
  1. createAppAPI的执行结果是createApp方法，方法的执行结果是返回一个App对象；
  • 注意：千万不要混淆了Vue框架中的App和开发者定义的App，开发者定义的App其实是函数的传入参数rootComponent这个根组件, rootProps是开发者传入的根组件相关的props。
  1. 检查props的合法性---如果不为null，必须是对象；
  2. 创建一个AppContext对象context, 它包含一个app属性指向App对象，plugin，provide，directive和component等都是挂载在此对象上;
  3. installedPlugins用来存储安装的Plugin;
  4. isMounted置为false，标记为未挂载；
  5. 生成了一个app对象，它包含一些属性：_component为开发者定义的App根组件，_props为开发者传入的根组件相关的props，_context为上面定义的AppContext对象context。它还包含了一些方法，use安装插件方法，mixin混入方法，component全局定义组件方法，directive指令方法，mount挂载方法，unmount卸载方法，provide共享数据方法。
  • 这里我们可以看到Vue 3.0一个重大的变化就是这些方法从以前Vue 2.0的全局方法变成了app对象方法。
  • 这里面一个重要的方法是mount挂载方法，具体功能后面会做介绍。这个方法持有了render渲染方法，所以调用mount方法的时候不需要传递渲染器，这是函数柯里化的一个重要技巧。
重写mount方法

我们回到createApp入口函数，上个小节分析了const app = ensureRenderer().createApp(...args)这行代码的实现细节，我们接下来分析接下来的流程：

export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)

  // 1. 
  const { mount } = app
  app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    // 2. 
    const container = normalizeContainer(containerOrSelector)
    if (!container) return
    
    // 3.
    const component = app._component

    // 4.
    container.innerHTML = ''
    // 5.
    const proxy = mount(container, false, container instanceof SVGElement)
    if (container instanceof Element) {
      // 6.
      container.removeAttribute('v-cloak')
      // 7.
      container.setAttribute('data-v-app', '')
    }
    return proxy
  }

  return app
}) as CreateAppFunction
  1. 解构了app中的mount方法，然后重写app中的mount方法；
  2. 标准化容器，如果容器是一个字符串，则会调用document.querySelector(container)找到对应的DOM节点，这就是我们可以传入"#app"作为容器的原因；
  3. 将app._component赋值给component对象，这个对象其实就是开发者提供的App根组件；
  4. 清除容器的内容，即如果容器有子节点将会被清除掉；
  5. 调用框架中的App的的mount方法，即createAppAPI方法中的app对象的mount，进行挂载，这个流程下面详细介绍；
  • 看一眼mount方法调用：mount(container, true, container instanceof SVGElement)，先了解下第一个是容器，第二个参数是true，第三个参数是false。
  1. 清除掉容器的v-cloak Attribute,这个可以属性可以和{display:none}结合解决网络慢的情况下的页面闪动问题;
  2. 容器加上data-v-app Attribute，这个属性没啥实际作用，就只是个标记;

我们来到App的mount方法：

mount(
    rootContainer: HostElement,
    isHydrate?: boolean,
        isSVG?: boolean
    ): any {
    if (!isMounted) {
        // 1. 
        const vnode = createVNode(
            rootComponent as ConcreteComponent,
            rootProps
        )
        // 2.
        vnode.appContext = context
        // 3.
        render(vnode, rootContainer, isSVG)
        // 4.
        isMounted = true
        // 5.
        app._container = rootContainer

        return vnode.component!.proxy
    }
}
  1. 首先根据rootComponent和rootProps创建对应的VNode对象vnode;
  2. 给vnode的appContext赋值为创建app时初始化的context, 这个context上面介绍过，可以挂在插件等内容，此外也有app属性指向app；
  3. 渲染vnode，这个下面会重点介绍，暂不深入；
  4. 标记为已挂载；
  5. 给app的_container赋值为父容器；

App的mount流程中有两个重要的逻辑：创建VNode的createVNode和渲染VNode的render(vnode, rootContainer, isSVG)，接下来我们就来介绍他们。

创建VNode

VNode是在前端开发描述DOM的JS对象，它可以描述不同类型的节点，可以是组件节点，也可以是普通的元素节点，还有其他多种类型的节点。DOM是树状结构，VNode也是树状结构。

VNode和Flutter中的Widget类似，只是节点信息的描述树。Flutter中真正的渲染树是RenderObject树，而Vue的渲染树在前端开发中则是DOM树。

Flutter跨平台的逻辑是渲染逻辑根据不同的平台有差异，Vue基于VNode也是可以跨平台的，譬如Weex和uniapp就是利用Vue实现多平台的开发。

createVNode

createVNode内部指向的是_createVNode函数：

function _createVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  props: (Data & VNodeProps) | null = null,
  children: unknown = null,
  patchFlag: number = 0,
  dynamicProps: string[] | null = null,
  isBlockNode = false
): VNode {
  // 1.
  if (isVNode(type)) {
    const cloned = cloneVNode(type, props, true /* mergeRef: true */)
    if (children) {
      normalizeChildren(cloned, children)
    }
    return cloned
  }

  if (props) {
    // 2.
    props = guardReactiveProps(props)!
    // 3.
    let { class: klass, style } = props
    if (klass && !isString(klass)) {
      props.class = normalizeClass(klass)
    }
    // 4.
    if (isObject(style)) {
      if (isProxy(style) && !isArray(style)) {
        style = extend({}, style)
      }
      props.style = normalizeStyle(style)
    }
  }

  // 5. 
  const shapeFlag = isString(type)
    ? ShapeFlags.ELEMENT
    : __FEATURE_SUSPENSE__ && isSuspense(type)
    ? ShapeFlags.SUSPENSE
    : isTeleport(type)
    ? ShapeFlags.TELEPORT
    : isObject(type)
    ? ShapeFlags.STATEFUL_COMPONENT
    : isFunction(type)
    ? ShapeFlags.FUNCTIONAL_COMPONENT
    : 0

  // 6. 
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  )
}
  1. 如果传入的type参数本来就是VNode，那么就复制一份并且标准化子节点并返回；
  2. 如果有props参数就进行参数标准化，如果是响应式对象就拷贝一份，否则不做处理；响应式的对象复制是为了避免修改响应式的数据造成其他副作用；
  3. 对class进行标准化，如果是字符串就直接返回对应的原值，如果是数组就对数组的每个元素进行标准化，如果是对象就获取对象的属性值为true然后用空格分开；参考文档
  4. 对style进行标准化，如果是字符串或者对象直接返回原值，如果是数据就对数组中的每个元素的key和value组合成style对象；参考文档；
  5. 根据type的类型编码成ShapeFlags，如果传入的是Object，则编码成ShapeFlags.STATEFUL_COMPONENT；
  6. 最后调用createBaseVNode进行真正的创建VNode；
function createBaseVNode(
  type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  props: (Data & VNodeProps) | null = null,
  children: unknown = null,
  patchFlag = 0,
  dynamicProps: string[] | null = null,
  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
  isBlockNode = false,
  needFullChildrenNormalization = false
) {
  // 1. 
  const vnode = {
    __v_isVNode: true,
    __v_skip: true,
    type,
    props,
    key: props && normalizeKey(props),
    ref: props && normalizeRef(props),
    scopeId: currentScopeId,
    slotScopeIds: null,
    children,
    component: null,
    suspense: null,
    ssContent: null,
    ssFallback: null,
    dirs: null,
    transition: null,
    el: null,
    anchor: null,
    target: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag,
    patchFlag,
    dynamicProps,
    dynamicChildren: null,
    appContext: null
  } as VNode


  if (needFullChildrenNormalization) {
    // 2. 
    normalizeChildren(vnode, children)
  } else if (children) {
    vnode.shapeFlag |= isString(children)
      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN
  }

  return vnode
}
  1. 生成vnode对象，包含了type和props参数；
  2. 标准化子节点---将子节点赋值给vnode对象的children属性，根据子节点的ShapeFlags修改点前VNode的ShapeFlags；

渲染VNode

我们接下来看看mount方法中的render(vnode, rootContainer, isSVG)的逻辑：

  const render: RootRenderFunction = (vnode, container, isSVG) => {
    // 1. 
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      // 2.
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPostFlushCbs()
    // 3. 
    container._vnode = vnode
  }
  1. 如果vnode为null，则卸载父容器的_vnode对象；
  2. 如果vnode不为null，则调用patch方法，第一次container._vnode为null，vnode为开发者的App生成的VNode,container为#appDOM元素；
  3. 父容器的_vnode设置为vnode；

挂载和更新VNode 

  // 1.
  const patch: PatchFn = (
    n1,
    n2,
    container,
    anchor = null,
    parentComponent = null,
    parentSuspense = null,
    isSVG = false,
    slotScopeIds = null,
    optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
  ) => {
    // 2.
    if (n1 === n2) {
      return
    }

    // 3.
    if (n1 && !isSameVNodeType(n1, n2)) {
      anchor = getNextHostNode(n1)
      unmount(n1, parentComponent, parentSuspense, true)
      n1 = null
    }

    if (n2.patchFlag === PatchFlags.BAIL) {
      optimized = false
      n2.dynamicChildren = null
    }
    
    // 4.
    const { type, ref, shapeFlag } = n2
    switch (type) {
      case Text:
        processText(n1, n2, container, anchor)
        break
      case Comment:
        processCommentNode(n1, n2, container, anchor)
        break
      case Static:
        if (n1 == null) {
          mountStaticNode(n2, container, anchor, isSVG)
        } else if (__DEV__) {
          patchStaticNode(n1, n2, container, isSVG)
        }
        break
      case Fragment:
        processFragment(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          slotScopeIds,
          optimized
        )
        break
      default:
        if (shapeFlag & ShapeFlags.ELEMENT) {
          processElement(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized
          )
        } else if (shapeFlag & ShapeFlags.COMPONENT) {
          processComponent(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized
          )
        } else if (shapeFlag & ShapeFlags.TELEPORT) {
          ;(type as typeof TeleportImpl).process(
            n1 as TeleportVNode,
            n2 as TeleportVNode,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized,
            internals
          )
        } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
          ;(type as typeof SuspenseImpl).process(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            slotScopeIds,
            optimized,
            internals
          )
        } else if (__DEV__) {
          warn('Invalid VNode type:', type, `(${typeof type})`)
        }
    }

    if (ref != null && parentComponent) {
      setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
    }
  }
  1. patch方法的第一个参数是旧的VNode，第二个参数是新的VNode，第三个参数是父节点DOM元素；
  2. 如果新旧VNode是同一个对象就不需要操作，直接返回；
  3. 如果新旧VNode的VNodeType不一致，就先卸载旧的VNode，将旧的VNode置空，再挂载新的VNode；
  4. 根据新VNode的type和shapeFlag,如果是组件则进入processComponent方法，如果普通节点就进入processElement方法；

processComponent 处理组件

  const processComponent = (
    n1: VNode | null,
    n2: VNode,
    container: RendererElement,
    anchor: RendererNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    isSVG: boolean,
    slotScopeIds: string[] | null,
    optimized: boolean
  ) => {
    n2.slotScopeIds = slotScopeIds
    if (n1 == null) {
      if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
        ;(parentComponent!.ctx as KeepAliveContext).activate(
          n2,
          container,
          anchor,
          isSVG,
          optimized
        )
      } else {
        mountComponent(
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized
        )
      }
    } else {
      updateComponent(n1, n2, optimized)
    }
  }

如果旧的VNode为null，且不是keep-alive组件，则调用mountComponent方法进行组件的挂载。

mountComponent 挂载组件

  const mountComponent: MountComponentFn = (
    initialVNode,
    container,
    anchor,
    parentComponent,
    parentSuspense,
    isSVG,
    optimized
  ) => {
    // 1. 
    const compatMountInstance =
      __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
    const instance: ComponentInternalInstance =
      compatMountInstance ||
      (initialVNode.component = createComponentInstance(
        initialVNode,
        parentComponent,
        parentSuspense
      ))

    // 2. 
    if (!(__COMPAT__ && compatMountInstance)) {
      setupComponent(instance)
    }

    // 3.
    setupRenderEffect(
      instance,
      initialVNode,
      container,
      anchor,
      parentSuspense,
      isSVG,
      optimized
    )

  }
  1. 创建组件实例ComponentInternalInstance对象compatMountInstance,我们看到创建的实例接收了vnode和父容器节点的DOM元素, 其他的属性初始化的时候都是默认的;
  2. 设置组件实例主要是从持有的vnode中获取props和slot等属性然后进行相应的属性设置，此外开发者如果再组件中有使用setup方法，那这个setup方法也会被调用，持有其中的属性和方法；
  3. 根据组件实例compatMountInstance,vnode和父容器节点的DOM元素创建一个带副作用渲染函数；

setupRenderEffect - 创建带副作用的渲染函数

  const setupRenderEffect: SetupRenderEffectFn = (
    instance,
    initialVNode,
    container,
    anchor,
    parentSuspense,
    isSVG,
    optimized
  ) => {
    
    // 1. 
    const componentUpdateFn = () => {
        if (!instance.isMounted) {
            const subTree = (instance.subTree = renderComponentRoot(instance))
            patch(
            null,
            subTree,
            container,
            anchor,
            instance,
            parentSuspense,
            isSVG
          )
          initialVNode.el = subTree.el
        }
    }

    // 2. 
    const effect = new ReactiveEffect(
      componentUpdateFn,
      () => queueJob(instance.update),
      instance.scope // track it in component's effect scope
    )
    
    // 3.
    const update = (instance.update = effect.run.bind(effect) as SchedulerJob)
    update.id = instance.uid
    // allowRecurse
    // #1801, #2043 component render effects should allow recursive updates
    effect.allowRecurse = update.allowRecurse = true

    // 4.
    update()
  }
  1. 创建了一个初次渲染或者更新渲染的componentUpdateFn方法，其实他们都会调用patch方法，他们的区别是初次渲染的第一个参数是null，而更新渲染时第一个参数是旧的VNode;
  • componentUpdateFn中调用的patch方法有一个特点就是传了instance，即把ComponentInternalInstance对象当做参数传入patch方法。
  1. 创建了一个ReactiveEffect对象effect，这个对象的第一个参数fn是一个函数，当effect调用update方法时会执行fn的函数调用；
  2. 将effect的run函数赋值给instance的update属性，并给update标记一个id；
  3. 执行update(), 也就是执行componentUpdateFn方法，componentUpdateFn方法会调用patch方法，递归下去。

patch 到最后肯定是处理普通元素的VNode，所以接下来我们就了解下普通元素的VNode是如何处理的。

processElement 处理普通元素节点

  const processElement = (
    n1: VNode | null,
    n2: VNode,
    container: RendererElement,
    anchor: RendererNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: SuspenseBoundary | null,
    isSVG: boolean,
    slotScopeIds: string[] | null,
    optimized: boolean
  ) => {
    isSVG = isSVG || (n2.type as string) === 'svg'
    if (n1 == null) {
      mountElement(
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        slotScopeIds,
        optimized
      )
    } else {
      
    }
  }

processElement在n1为null的时候是进入mountElement挂载元素方法。

mountElement 挂载元素节点

const mountElement = (
  vnode: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  slotScopeIds: string[] | null,
  optimized: boolean
) => {
  let el: RendererElement
  let vnodeHook: VNodeHook | undefined | null
  const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode

  // 1. 
  el = vnode.el = hostCreateElement(
    vnode.type as string,
    isSVG,
    props && props.is,
    props
  )

  // 2. 
  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    hostSetElementText(el, vnode.children as string)
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    mountChildren(
      vnode.children as VNodeArrayChildren,
      el,
      null,
      parentComponent,
      parentSuspense,
      isSVG && type !== 'foreignObject',
      slotScopeIds,
      optimized
    )
  }

  if (dirs) {
    invokeDirectiveHook(vnode, null, parentComponent, 'created')
  }
  // props
  if (props) {
    for (const key in props) {
      if (key !== 'value' && !isReservedProp(key)) {
        hostPatchProp(
          el,
          key,
          null,
          props[key],
          isSVG,
          vnode.children as VNode[],
          parentComponent,
          parentSuspense,
          unmountChildren
        )
      }
    }
  }
    
  // 4.    
  hostInsert(el, container, anchor)
  
}
  1. 通过hostCreateElement创建DOM元素节点，我们前面介绍过hostCreateElement是创建渲染器时候传入的配置参数,本质是调用doc.createElement(tag, is ? { is } : undefined)；
  2. 对子节点进行处理：如果子节点是文本，则最后实际调用el.textContent = text；如果子节点是数组，调用mountChildren方法，数组的每个子节点调用patch挂载子节点；
  3. 判断如果有props,通过hostPatchProp方法给这个DOM节点设置相关的class,style,event等属性。
  4. 将创建的DOM元素挂载到container上。

我们看到了先进行path深度优先遍历，然后再挂载创建的DOM元素，也就是说挂载DOM元素是从树的子节点开始然后逐步挂载直到根节点，最后整体挂载到#app这个元素上。至此整个DOM数渲染完成了。

总结

createApp

createApp

mount

mount

你可能感兴趣的:(Vue 3.0组件的渲染流程)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • iOS http封装 374016526 ios服务器交互http网络请求
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
      那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
  • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
  • Informatica参数及变量 18289753290 Informatica参数变量
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
  • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
  • Hibernate的总结 永夜-极光 Hibernate
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
  • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
  • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
  • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
    创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
  • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
  • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
    一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
  • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
    1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
  • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
  • 提高职业素养，做好人生规划 白糖_ 人生
      培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
  • 国外的网站你都到哪边看？ bozch 技术网站国外
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
  • 编程之美-光影切割问题 bylijinnan 编程之美
    package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
  • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
            现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
  • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
    The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
  • 关于 CAS SSO 文章声明 denger SSO
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
  • 初二上学期难记单词 dcj3sjt126com englishword
    lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
  • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
    #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
  • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
    /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
  • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
    页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
  • spring中少用的注解@primary解析 jackyrong primary
    这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
  • Java几款性能分析工具的对比 lbwahoo java
    Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
  • JVM参数配置大全 nickys jvm应用服务器
    JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
  • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
    （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
  • Spring缓存注解@Cache使用 tom_seed spring
    参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他