小白看源码之Vue篇-2:组件化的过程__Vue.js
发布于 12 天前 作者 banyungong 198 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

前言

又到了周末,开始梳理Vue源码的第二篇,在这篇中,我们会讲到初始化Vue过程中组件化的过程,包括如何创建Vnode的过程。以及搞清楚vm.$vnodevm._vnode的区别和关系。上一篇文章我们讲到vm.$mount函数最后执行到了vm._update(vm._render(), hydrating)那么这一篇我们将接着上一篇的结尾开始讲。

创建Vnode

vm._update(vm._render(), hydrating)这个行代码,我们首先要看的是vm._render()他到底干了什么。

一、vm._render()干了什么

首先,我们来到vm._render()的定义处src/core/instance/render.js

export function renderMixin (Vue: Class<Component>{  //Vue类初始化的时候挂载render函数
  // install runtime convenience helpers
  installRenderHelpers(Vue.prototype)

  Vue.prototype.$nextTick = function (fn: Function{
    return nextTick(fn, this)
  }

  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options

    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      )
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode //首次挂载为undefined
    // render self
    let vnode
    try {
      // There's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm
      vnode = render.call(vm._renderProxy, vm.$createElement)      //Vnode的具体实现通过vm.$createElement
    } catch (e) {
      handleError(e, vm, `render`)
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
        try {
          vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
        } catch (e) {
          handleError(e, vm, `renderError`)
          vnode = vm._vnode
        }
      } else {
        vnode = vm._vnode
      }
    } finally {
      currentRenderingInstance = null
    }
    // if the returned array contains only a single node, allow it  只能有一个根节点
    if (Array.isArray(vnode) && vnode.length === 1) {
      vnode = vnode[0]
    }
    // return empty vnode in case the render function errored out  只能有一个根节 
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) { //只能有一个根节点
        warn(
          'Multiple root nodes returned from render function. Render function ' +
          'should return a single root node.',
          vm
        )
      }
      vnode = createEmptyVNode()
    }
    // set parent
    vnode.parent = _parentVnode
    return vnode
  }
}

可以通过代码看到,vm._render()是在Vue的renderMixin过程中创建的,先不细究每一处代码,我们可以看到vm._render()最终返回的就是一个vnode。然后作为vm._update(vnode,hydrafting)的参数传入。 我们重点看其中的几个步骤,细节可以暂时忽略:

1、const { render, _parentVnode } = vm.$options我们从vm.$options拿到了render函数和他的父亲vnode(首次实例化肯定是空的);

2、vm.$vnode = _parentVnode注释写的非常清楚这个节点可以让render函数拿到占位符节点的数据。后续组件创建的时候会讲到是如何拿到占位符节点的数据的,可以这么理解vm.$vnode就是父亲节点,也就是占位符节点,例如element-ui的<el-button></el-button>就是一个占位符节点。

3、vnode = render.call(vm._renderProxy, vm.$createElement)可以看到,实际上vnode是通过vm.$createElement生成的,而vm.$createElement也就是我们常说的h函数:

new Vue({
  renderh => h(App),
}).$mount('#app')

至于vm._renderProxy则是在vm._init()的时候定义的,开发环境下就是vm本身。

二、vm.$createElement

那么接下来我们来看vm.$createElement做了什么。代码也在src/core/instance/render.js,是通过vm._init()进行的initRender(vm)来初始化vm.$createElement

export function initRender (vm: Component{
  //.....some codes
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // internal version is used by render functions compiled from templates
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // normalization is always applied for the public version, used in
  // user-written render functions.
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  // $attrs & $listeners are exposed for easier HOC creation.
  // they need to be reactive so that HOCs using them are always updated
  //... somecodes
}

可以看到vm.$createElement实际上就是返回了createElement(vm, a, b, c, d, true)的结果,接下来看一下createElement(vm, a, b, c, d, true)干了什么。

三、createElement_createElement

3-1:createElement

createElement定义在src/core/vdom/create-elements.js下:

export function createElement ( //对_createElement函数的封装
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode
{
  if (Array.isArray(data) || isPrimitive(data)) { //如果未传入data 则把变量值往下传递
    normalizationType = children
    children = data
    data = undefined
  }
  if (isTrue(alwaysNormalize)) {
    normalizationType = ALWAYS_NORMALIZE
  }
  return _createElement(context, tag, data, children, normalizationType)
}

看到传入的参数大家就会觉得非常的熟悉了,就是vue官方文档中的creatElement参数中定义的那些字段。我们在这里传入的当然是App.vue导出的这个App对象了,当做是tag传入。可以看到createElement()方法实际就是如果未传入data参数,就把childer之类的参数全部向下移位,防止参数调用错误。真正的逻辑则在其返回的函数_createElement

3-2:_createElement

_createElement相关定义也在src/core/vdom/create-elements.js下:

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode
{
  if (isDef(data) && isDef((data: any).__ob__)) {
    process.env.NODE_ENV !== 'production' && warn(
      `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
      'Always create fresh vnode data objects in each render!',
      context
    )
    return createEmptyVNode()
  }
  // object syntax in v-bind
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()
  }
  // warn against non-primitive key
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {
    if (!__WEEX__ || !('[@binding](/user/binding)' in data.key)) {
      warn(
        'Avoid using non-primitive value as key, ' +
        'use string/number value instead.',
        context
      )
    }
  }
  // support single function children as default scoped slot
  if (Array.isArray(children) &&
    typeof children[0] === 'function'
  ) {
    data = data || {}
    data.scopedSlots = { default: children[0] }
    children.length = 0
  }
  if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
        warn(
          `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
          context
        )
      }
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefinedundefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      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,
        undefinedundefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}

代码很长,我们关注几个重点即可:

1、children参数的处理:children参数有两种处理情况,根据传入的参数normalizationType的值来确定。如果是ALWAYS_NORMALIZE调用normalizeChildren(children)如果是SIMPLE_NORMALIZE则调用simpleNormalizeChildren(children)。这两个函数的定义在同级目录的./helper/normolize-children.js下,这里不细展开来讲了,自己看一看就大概了解了,一个是直接concat()拍平数组,一个就是递归push进一个数组当中:

if (normalizationType === ALWAYS_NORMALIZE) {
    children = normalizeChildren(children)
else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
}

2、判断tag类型:1、如果是string类型,则继续判断是否是原生的html标签,如果是,就new Vnode(),否则该tag是通过vue.component()或者局部component注册的组件(后续会讲),则走createComponent()生成组件vnode;2、如果不是string类型,那么则是类似我们上面那种情况,传入的是App这个对象,则走createComponent()方法创建vnode:

if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn)) {
        //生产环境相关
      }
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefinedundefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      //未知命名空间
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
 }

3、return Vnode没啥好说的。

到这里那么vnode就生成了,那么我们接下来去看一下createComponent(tag, data, context, children)都干了些什么。

四、createComponent()

createComponent()是一个比较复杂的环节,希望大家能够反复的琢磨这里面的奥妙,本小白也是在这个地方停留了很久,有非常多的细节需要注意的。 createComponent()定义在src/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 
{
  if (isUndef(Ctor)) {
    return
  }

  const baseCtor = context.$options._base  //就是Vue本身,作为一个基类构造器

  // plain options object: turn it into a constructor
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor) // 转化为一个构造器,了解Vue.extend的实现
  }

  // if at this stage it's not a constructor or an async component factory,
  // reject.
  if (typeof Ctor !== 'function') {
    if (process.env.NODE_ENV !== 'production') {
      warn(`Invalid Component definition: ${String(Ctor)}`, context)
    }
    return
  }

  // async component
  let asyncFactory
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered
      // as a comment node but preserves all the raw information for the node.
      // the information will be used for async server-rendering and hydration.
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

  data = data || {}

  // resolve constructor options in case global mixins are applied after
  // component constructor creation
  resolveConstructorOptions(Ctor)

  // transform component v-model data into props & events
  if (isDef(data.model)) {
    transformModel(Ctor.options, data)
  }

  // extract props
  const propsData = extractPropsFromVNodeData(data, Ctor, tag)

  // functional component
  if (isTrue(Ctor.options.functional)) {
    return createFunctionalComponent(Ctor, propsData, data, context, children)
  }

  // extract listeners, since these needs to be treated as
  // child component listeners instead of DOM listeners
  const listeners = data.on
  // replace with listeners with .native modifier
  // so it gets processed during parent component patch.
  data.on = data.nativeOn

  if (isTrue(Ctor.options.abstract)) {
    // abstract components do not keep anything
    // other than props & listeners & slot

    // work around flow
    const slot = data.slot
    data = {}
    if (slot) {
      data.slot = slot
    }
  }

  // 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, undefinedundefinedundefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
  )

  // Weex specific: invoke recycle-list optimized [@render](/user/render) function for
  // extracting cell-slot template.
  // https://github.com/Hanks10100/weex-native-directive/tree/master/component
  /* istanbul ignore if */
  if (__WEEX__ && isRecyclableComponent(vnode)) {
    return renderRecyclableComponentTemplate(vnode)
  }

  return vnode
}

我们关注其中的几个重点:

createComponent之一、Ctor = baseCtor.extend(Ctor)即 Vue.extend()干了什么

baseCtor = context.$options._base首次渲染的时候,指的就是vue本身,定义在src/core/global-api/index.js中: Vue.options._base = Vue 那么vue.extend()到底对我们的App对象做了什么呢,Vue.extend接下去定义在src/core/global-api/extend.js

Vue.cid = 0
let cid = 1
Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this //指向Vue静态方法
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) { //单例模式,如果是复用的组件,那么 直接返回缓存在cachedCtors[SuperId]上的Sub
      return cachedCtors[SuperId]
    }

    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name) // 校验component的name属性
    }

    const Sub = function VueComponent (options{
      this._init(options)
    }
    Sub.prototype = Object.create(Super.prototype) //原型继承
    Sub.prototype.constructor = Sub //再把constructor指回sub
    Sub.cid = cid++
    Sub.options = mergeOptions(  //合并options
      Super.options,
      extendOptions
    )
    Sub['super'] = Super //super指向Vue

    // 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
}

tips:可能很多同学看到这里会有些晕了,毕竟文章是按顺序往下写的,可能没有那么直观,很容易造成架构的混淆之类的,这里贴一下我整理的层级幕布图,仅供参考,希望能有所帮助:Vue源码解读

Vue.extend()大致做了以下五件事情。

1、cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})创建该组件实例的构造方法属性,单例模式,优化性能:

if (cachedCtors[SuperId]) { //单例模式,如果是复用的组件,那么 直接返回缓存在cachedCtors[SuperId]上的Sub
 return cachedCtors[SuperId]
}

2、原型继承模式,创建组件的构造函数:

const Sub = function VueComponent (options{
 this._init(options)//找到Vue的_init
}
Sub.prototype = Object.create(Super.prototype) //原型继承
Sub.prototype.constructor = Sub //再把constructor指回sub
Sub.cid = cid++
Sub.options = mergeOptions(  //合并options
 Super.options,
    extendOptions
)
Sub['super'] = Super //super指向Vue

3、提前数据双向绑定,防止patch实例化的时候在此调用object.defineProperty

    if (Sub.options.props) {
      initProps(Sub)
    }
    if (Sub.options.computed) {
      initComputed(Sub)
    }

4、继承Vue父类的全局方法:

    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use

5、缓存对象并返回:

    cachedCtors[SuperId] = Sub
    return Sub

createComponent之剩下其他:

createcomponent()介绍了以下extend方法,接下来还有一些比较重的地方的,往后会在patch环节重点讲到,这边先将其列出,希望读者能够略作留意。

1、const propsData = extractPropsFromVNodeData(data, Ctor, tag)这条代码将是往后我们从占位符节点获取自定义props属性并传入子组件的关键所在,patch过程会详细说明。

2、函数式组件:

if (isTrue(Ctor.options.functional)) {
 return createFunctionalComponent(Ctor, propsData, data, context, children)
}

3、installComponentHooks(data)又是一个重点,注册组件上面的钩子函数,钩子函数定义在同一个文件下面:分为init、prepatch、insert、destroy四个钩子函数,patch过程讲到会专门介绍:

const hooksToMerge = Object.keys(componentVNodeHooks)
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
    }
  }
}

4、new Vnode() & retrun vnode:

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

可以看到组件的构造函数等一些被放在了一个对象当中传入了构造函数。

那么到这么,createComponent()的过程也大致过了一遍了。

五、Virtual-Dom

讲了半天的vnode创建,也没有讲到vnode类的实现,放到最后面讲是有原因的,实在是创建vnode情况太多了,上面先铺开,再到最后用vnode一收,希望能狗加深各位的印象。

5-1、为什么要使用Vnode?

1、创建真实DOM的代价高

真实的DOM节点node实现的属性很多,而vnode仅仅实现一些必要的属性,相比起来,创建一个vnode的成本比较低。所以创建vnode可以让我们更加关注需求本身。

2、触发多次浏览器重绘及回流

是使用vnode,相当于加了一个缓冲,让一次数据变动所带来的所有node变化,先在vnode中进行修改,然后diff之后对所有产生差异的节点集中一次对DOM tree进行修改,以减少浏览器的重绘及回流。这一点我们会在深入响应原理的章节当中详细介绍,包括渲染watcher更新队列,组件的更新等等~

5-2、Class Vnode{}

Vnode类定义在src/core/vdom/vnode.js中:

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void// rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void// component instance
  parent: VNode | void// component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void// async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void// real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  devtoolsMeta: ?Object// used to store functional render context for devtools
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    //somecodes
  }

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

看起来这个Vnode类已经非常的长了,实际的dom节点要比这个更加的庞杂巨大,其中的属性,有些我们暂时可以不用关心,我们重点放在构造函数上:

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

我们来对照一下createComponent()中创建的vnode传入的参数是哪几个:

const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
    data, undefinedundefinedundefined, context,
    { Ctor, propsData, listeners, tag, children },
    asyncFactory
)

可以看到,实际上createComponent()中就传入了一个tag、data、当前的vm:context还有一个componentOptions,当然精华都是在这个componentOptions里面的,后面的_update也就是围绕这个componentOptions展开patch的,那么就放到下一篇:《小白看源码之Vue篇-3:vnode的patch过程》!

总结

那么vm._render()创建虚拟dom的过程我们也就大致过了一遍,文章一遍写下来,实际很多的地方需要读者自己反复的琢磨,不是看一遍就了解的,本小白也是在反复挣扎后才略知一二的。

本节的重点如何创建一个vnode,以及不同情况下的不同创建方式,暂不要深究细节,往后慢慢会涉及到铺开,你在回过头来,恍然大明白!加深印象!

最后的最后打个小小的广告~

有大佬们需要短信业务,或者号码认证的能力的话,可以看看这里!中国联通创新能力平台 运营商官方平台!没有中间商赚差价~

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 陈小白cgf 原文链接:https://juejin.im/post/6856029939205210126

回到顶部