关于vue.js:每日一题之请描述Vue组件渲染流程

46次阅读

共计 9535 个字符，预计需要花费 24 分钟才能阅读完成。

组件化是 Vue, React 等这些框架的一个核心思想，通过把页面拆成一个个高内聚、低耦合的组件，能够极大水平进步咱们的代码复用度，同时也使得我的项目更加易于保护。所以，本文就来剖析下组件的渲染流程。咱们通过上面这个例子来进行剖析：

<div id="demo">
  <comp></comp>
</div>
<script>
  Vue.component('comp', {    template: '<div>I am comp</div>',})  const app = new Vue({el: '#demo',})
</script>

这里咱们分为两步来剖析：组件申明、组件创立及渲染

组件申明

首先，咱们看下 Vue.component 是什么货色，它的申明在 core/global-api/assets.js：

export function initAssetRegisters(Vue: GlobalAPI) {// ASSET_TYPES 是数组：['component','directive','filter']
  ASSET_TYPES.forEach((type) => {Vue[type] = function (id: string,      definition: Function | Object): Function | Object | void {if (!definition) {return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {validateComponentName(id)
        }
        // 组件申明相干代码
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          // _base 是 Vue
          // Vue.extend({}) 返回组件构造函数
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {definition = {bind: definition, update: definition}
        }
        // 注册到 components 选项中去
        // 在 Vue 原始选项上增加组件配置，未来其余组件继承，它们都有这些组件注册
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

这里 this.options._base.extend(definition) 调用的其实就是 Vue.extend(definition)：

Vue.extend = function (extendOptions: Object): Function {extendOptions = extendOptions || {}
  const Super = this
  const SuperId = Super.cid
  const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  if (cachedCtors[SuperId]) {return cachedCtors[SuperId]
  }

  const name = extendOptions.name || Super.options.name
  if (process.env.NODE_ENV !== 'production' && name) {validateComponentName(name)
  }

  const Sub = function VueComponent(options) {this._init(options)
  }
  Sub.prototype = Object.create(Super.prototype)
  Sub.prototype.constructor = Sub
  Sub.cid = cid++
  Sub.options = mergeOptions(Super.options, extendOptions)
  Sub['super'] = Super

  // For props and computed properties, we define the proxy getters on
  // the Vue instances at extension time, on the extended prototype. This
  // avoids Object.defineProperty calls for each instance created.
  if (Sub.options.props) {initProps(Sub)
  }
  if (Sub.options.computed) {initComputed(Sub)
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend
  Sub.mixin = Super.mixin
  Sub.use = Super.use

  // create asset registers, so extended classes
  // can have their private assets too.
  ASSET_TYPES.forEach(function (type) {Sub[type] = Super[type]
  })
  // enable recursive self-lookup
  if (name) {Sub.options.components[name] = Sub
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options
  Sub.extendOptions = extendOptions
  Sub.sealedOptions = extend({}, Sub.options)

  // cache constructor
  cachedCtors[SuperId] = Sub
  return Sub
}

这里咱们能够了解为返回了一个名叫 VueComponent 的构造函数且继承了 Vue。所以，这里的组件定义实现后 Vue 就会变成这样：

{
  ...
  options: {
    components: {comp: function VueComponent() {}}
  }
  ..
}

组件创立及挂载

咱们晓得 Vue 中的模板最初会变编译成 render 函数，比方下面例子最终的 render 函数会如下所示：

render() {with (this) {return _c('div',{attrs:{"id":"demo"}},[_c('comp')],1)}
}

这里 _c 的定义能够在 core/instance/render.js 中找到：

vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

所以 _c('comp') 最终还是调用了 createElement (core/vdom/create-element.js) 这个办法：参考 前端进阶面试题具体解答 

export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {
  ...
  return _createElement(context, tag, data, children, normalizationType)
}

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {...} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // 自定义组件
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  ...
}

这里咱们只看自定义组件的相干逻辑，发现最初调用了 createComponent (core/vdom/create-component.js)：

export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  ...

  // install component management hooks onto the placeholder node
  // 装置组件治理钩子：将来会做组件初始化（实例创立、挂载）installComponentHooks(data)

  // return a placeholder vnode
  const name = Ctor.options.name || tag
  const vnode = new VNode(`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefined, undefined, undefined, context,
    {Ctor, propsData, listeners, tag, children},
    asyncFactory
  )

  return vnode
}

这里咱们跳过其余的代码，先看看 installComponentHooks：

function installComponentHooks(data: VNodeData) {const hooks = data.hook || (data.hook = {})
  for (let i = 0; i < hooksToMerge.length; i++) {const key = hooksToMerge[i]
    const existing = hooks[key]
    const toMerge = componentVNodeHooks[key]
    if (existing !== toMerge && !(existing && existing._merged)) {hooks[key] = existing ? mergeHook(toMerge, existing) : toMerge
    }
  }
}

这里会在 data.hook 上挂载一些 hooks，如果用户也传了雷同的 hooks 则会进行合并。这个 hooks 又是啥呢：

const componentVNodeHooks = {
  // 实例化和挂载
  init(vnode: VNodeWithData, hydrating: boolean): ?boolean {
    if (
      vnode.componentInstance && // 实例曾经存在
      !vnode.componentInstance._isDestroyed && // 未被销毁
      vnode.data.keepAlive // 被标记为 keepAlive
    ) {
      // kept-alive components, treat as a patch
      // 对于缓存组件，只需 patch 即可
      const mountedNode: any = vnode // work around flow
      componentVNodeHooks.prepatch(mountedNode, mountedNode)
    } else {
      // 创立组件实例
      const child = (vnode.componentInstance = createComponentInstanceForVnode(
        vnode,
        activeInstance
      ))
      // 子组件挂载
      child.$mount(hydrating ? vnode.elm : undefined, hydrating)
    }
  },

  prepatch(oldVnode: MountedComponentVNode, vnode: MountedComponentVNode) {
    const options = vnode.componentOptions
    const child = (vnode.componentInstance = oldVnode.componentInstance)
    updateChildComponent(
      child,
      options.propsData, // updated props
      options.listeners, // updated listeners
      vnode, // new parent vnode
      options.children // new children
    )
  },

  insert(vnode: MountedComponentVNode) {const {context, componentInstance} = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    if (vnode.data.keepAlive) {if (context._isMounted) {
        // vue-router#1212
        // During updates, a kept-alive component's child components may
        // change, so directly walking the tree here may call activated hooks
        // on incorrect children. Instead we push them into a queue which will
        // be processed after the whole patch process ended.
        queueActivatedComponent(componentInstance)
      } else {activateChildComponent(componentInstance, true /* direct */)
      }
    }
  },

  destroy(vnode: MountedComponentVNode) {const {componentInstance} = vnode
    if (!componentInstance._isDestroyed) {
      // 不是缓存组件间接销毁
      if (!vnode.data.keepAlive) {componentInstance.$destroy()
      } else {deactivateChildComponent(componentInstance, true /* direct */)
      }
    }
  },
}

这里有四个 hooks，看他们的名字就晓得他们会在对应的操作去执行。比方 init 会在组件初始化的时候执行，这个前面碰到了再说。咱们持续看 createComponent：

// return a placeholder vnode
const name = Ctor.options.name || tag
const vnode = new VNode(`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
  data,
  undefined,
  undefined,
  undefined,
  context,
  {Ctor, propsData, listeners, tag, children},
  asyncFactory
)

return vnode
export default class VNode {
  ...
  constructor(tag?: string,    data?: VNodeData,    children?: ?Array<VNode>,    text?: string,    elm?: Node,    context?: Component,    componentOptions?: VNodeComponentOptions,    asyncFactory?: Function) {
    ...
    this.componentOptions = componentOptions
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child(): Component | void {return this.componentInstance}
}

这里初始化了一个 VNode 并进行了返回，到这里 _c('comp') 的工作就实现了。能够看到咱们的自定义组件的构造函数在这一步并没有执行，仅仅只是挂载到了 componentOptions 属性上。那他什么时候执行呢？别急，咱们接着往下走。

当根组件的 render 执行完后，会执行 vm._update 进行组件的更新，而后会调用 __patch__，咱们顺藤摸瓜最终来到 core/vdom/patch.js：

return function patch(oldVnode, vnode, hydrating, removeOnly) {
      ...
      // create new node
      createElm(
        vnode,
        insertedVnodeQueue,
        // extremely rare edge case: do not insert if old element is in a
        // leaving transition. Only happens when combining transition +
        // keep-alive + HOCs. (#4590)
        oldElm._leaveCb ? null : parentElm,
        nodeOps.nextSibling(oldElm)
      )
      ...
  return vnode.elm
}

而后会走到 createElm：

function createElm(
    vnode,
    insertedVnodeQueue,
    parentElm,
    refElm,
    nested,
    ownerArray,
    index
  ) {...} else {createChildren(vnode, children, insertedVnodeQueue);
        if (isDef(data)) {
          // 事件、属性等等初始化
          invokeCreateHooks(vnode, insertedVnodeQueue);
        }
        // 插入节点
        insert(parentElm, vnode.elm, refElm);
      }
  ...

留神到这里的 vnode 是 <div id="demo"></div> 这个元素的，所以会走到 createChildren：

function createChildren(vnode, children, insertedVnodeQueue) {if (Array.isArray(children)) {if (process.env.NODE_ENV !== 'production') {checkDuplicateKeys(children)
    }
    for (let i = 0; i < children.length; ++i) {
      createElm(children[i],
        insertedVnodeQueue,
        vnode.elm,
        null,
        true,
        children,
        i
      )
    }
  } else if (isPrimitive(vnode.text)) {nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
  }
}

这里最初又回到了 createElm，不过此时的 vnode 就是自定义组件了，会走到这里：

  function createElm(vnode,    insertedVnodeQueue,    parentElm,    refElm,    nested,    ownerArray,    index) {
    ...
    // 自定义组件创立
    if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {return;}
function createComponent(vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
    // 缓存的状况
    const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
    // 后面装置的钩子在这里用到了，执行了 init，自定义组件实例化
    if (isDef((i = i.hook)) && isDef((i = i.init))) {i(vnode, false /* hydrating */)
    }
    // after calling the init hook, if the vnode is a child component
    // it should've created a child instance and mounted it. the child
    // component also has set the placeholder vnode's elm.
    // in that case we can just return the element and be done.
    // 如果下面创立过程已实现，组件实例已存在
    if (isDef(vnode.componentInstance)) {
      // 初始化组件：组件下面事件、属性等
      initComponent(vnode, insertedVnodeQueue)
      // 插入 dom
      insert(parentElm, vnode.elm, refElm)
      if (isTrue(isReactivated)) {reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
      }
      return true
    }
  }
}

留神到这里会执行 i.init 办法，该办法上文曾经说过，会实例化组件对象，而后进行 $mount。而执行 $mount 最终又会走到 patch 办法，并最终执行 createElm：

function patch(oldVnode, vnode, hydrating, removeOnly) {
  ...
  if (isUndef(oldVnode)) {// empty mount (likely as component), create new root element
    isInitialPatch = true;
    createElm(vnode, insertedVnodeQueue);
  }
  ...
}

执行该办法又会递归的将自定义组件内的 vnode 渲染成实在的 dom，最初通过 insert 办法将整颗 dom 树插入到父元素之中。到这里自定义组件的渲染过程就完结了

正文完
vue.js
发表至： vue.js
2022-12-16
 0
关于vue.js:壁虎科技Vue中封装axios的取消请求事情
关于vue.js:vue获取目录下的文件名
关于vue.js:vue3-provide-inject-父子组件传值watch监听
关于vue.js:Vueuse-源码解析及使用