解析Vue 2.5的Diff算法(2)

  • TextVNode: 文本节点
  • ElementVNode: 普通元素节点
  • ComponentVNode: 组件节点
  • CloneVNode: 克隆节点,可以是以上任意类型的节点,唯一的区别在于isCloned属性为true
  • 3.Create-Element源码解析

    这部分代码在src/core/vdom/create-element.js里,我就直接粘代码加上我的注释了

    export function createElement (
     context: Component,
     tag: any,
     data: any,
     children: any,
     normalizationType: any,
     alwaysNormalize: boolean
    ): VNode {
     // 兼容不传data的情况
     if (Array.isArray(data) || isPrimitive(data)) {
     normalizationType = children
     children = data
     data = undefined
     }
     // 如果alwaysNormalize是true
     // 那么normalizationType应该设置为常量ALWAYS_NORMALIZE的值
     if (isTrue(alwaysNormalize)) {
     normalizationType = ALWAYS_NORMALIZE
     }
     // 调用_createElement创建虚拟节点
     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 {
    
     /**
     * 如果存在data.__ob__,说明data是被Observer观察的数据
     * 不能用作虚拟节点的data
     * 需要抛出警告,并返回一个空节点
     *
     * 被监控的data不能被用作vnode渲染的数据的原因是:
     * data在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) {
     // 当组件的is属性被设置为一个falsy的值
     // Vue将不会知道要把这个组件渲染成什么
     // 所以渲染一个空节点
     // in case of component :is set to falsy value
     return createEmptyVNode()
     }
     // key为非原始值警告
     // warn against non-primitive key
     if (process.env.NODE_ENV !== 'production' &&
     isDef(data) && isDef(data.key) && !isPrimitive(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
     }
     // 根据normalizationType的值,选择不同的处理方法
     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
      // 就创建这样一个vnode
      vnode = new VNode(
      config.parsePlatformTagName(tag), data, children,
      undefined, undefined, context
      )
      // 如果不是保留字标签,尝试从vm的components上查找是否有这个标签的定义
     } else if (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
      vnode = new VNode(
      tag, data, children,
      undefined, undefined, context
      )
     }
     } else {
     // 当tag不是字符串的时候,我们认为tag是组件的构造类
     // 所以直接创建
     // direct component options / constructor
     vnode = createComponent(tag, data, context, children)
     }
     if (isDef(vnode)) {
     // 应用命名空间
     if (ns) applyNS(vnode, ns)
     return vnode
     } else {
     // 返回一个空节点
     return createEmptyVNode()
     }
    }
    function applyNS (vnode, ns, force) {
     vnode.ns = ns
     if (vnode.tag === 'foreignObject') {
     // use default namespace inside foreignObject
     ns = undefined
     force = true
     }
     if (isDef(vnode.children)) {
     for (let i = 0, l = vnode.children.length; i < l; i++) {
      const child = vnode.children[i]
      if (isDef(child.tag) && (isUndef(child.ns) || isTrue(force))) {
      applyNS(child, ns, force)
      }
     }
     }
    }
          

    内容版权声明:除非注明,否则皆为本站原创文章。

    转载注明出处:http://www.heiqu.com/706.html