关于前端:Vue虚拟dom是如何被创建的

35次阅读

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

先来看生成虚构 dom 的入口文件:

  ...
  import {parse} from './parser/index'
  import {optimize} from './optimizer'
  import {generate} from './codegen/index'
  ...
   const ast = parse(template.trim(), options)
  if (options.optimize !== false) {optimize(ast, options)
  }
  const code = generate(ast, options)
  ...

咱们看到了 AST 通过三轮加工，最终 本性难移 成为 render function code。那么咱们这一章就来讲AST 的第三次试炼。入口文件./codegen/index

export function generate (
ast: ASTElement | void,
options: CompilerOptions
): CodegenResult {const state = new CodegenState(options)
const code = ast ? genElement(ast, state) : '_c("div")'
return {render: `with(this){return ${code}}`,
  staticRenderFns: state.staticRenderFns
}
}

咱们来看 generate 函数外部结构，返回 render 是一个 with(this){return ${code}} 包起来的一串货色，staticRenderFns是在编译过程中会把那些不会变的动态节点打上标记，设置为 true，而后在渲染阶段 独自渲染 。
那么 genElement 函数的作用是什么呢？

export function genElement (el: ASTElement, state: CodegenState): string {if (el.staticRoot && !el.staticProcessed) {return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget) {return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {return genSlot(el, state)
  } else {
    // component or element
    let code
    if (el.component) {code = genComponent(el.component, el, state)
    } else {const data = el.plain ? undefined : genData(el, state)

      const children = el.inlineTemplate ? null : genChildren(el, state, true)
      code = `_c('${el.tag}'${data ? `,${data}` : ''// data      }${children ? `,${children}` :'' // children      })`
    }
    // module transforms
    for (let i = 0; i < state.transforms.length; i++) {code = state.transforms[i](el, code)
    }
    return code
  }
}

咱们能够看到有有限个 if else 在嵌套，而且 once、for、if、tag 就是 Vue 自身的屠非凡标签，并且最初有 return code 那么就是 拼接字符串 。
那么咱们来看一看生成的 with(this){return ${code}} 长啥样：

<div id="app">
  <ul>
    <li v-for="item in items">
      itemid:{{item.id}}
    </li>
  </ul>
</div>

通过 compile 之后转化成：

with(this){
  return 
     _c('div',{attrs:{"id":"app"}
     },
     [_c('ul',_l((items),function(item){
       return _c('li',
                 [_v("\n      itemid:"+_s(item.id)+"\n")]
       )}
      )
     )]
   )}

到这里咱们就把 tamplate 三次锻炼讲完了，那么render function code 有了，那真正的渲染函数在哪呢？进一步来揭晓:

 return {
    ast, //AST 模型
    render: code.render, //render 函数字符串
    staticRenderFns: code.staticRenderFns // 动态节点 render 函数字符串
  }

咱们裸露进来一个 ast、render、staticRenderFns 别离为 AST 模型，render 函数字符串， 动态的 render 函数字符串 , 那么咱们的render 函数在那里呢？
咱们晓得在 Vue 初始化的时候initRender:

  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)

该办法向 vue 上挂载了两个办法，一个服务于用户手写的 render 函数，一个则用于 template 模板。

export function renderMixin (Vue: Class<Component>) {
  // 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

    // reset _rendered flag on slots for duplicate slot check
    if (process.env.NODE_ENV !== 'production') {for (const key in vm.$slots) {
        // $flow-disable-line
        vm.$slots[key]._rendered = false
      }
    }

    if (_parentVnode) {vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject}

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode
    // render self
    let vnode
    try {vnode = render.call(vm._renderProxy, 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') {if (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}
      } else {vnode = vm._vnode}
    }
    // 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
  }
}

参考 前端进阶面试题具体解答

向 vue 原型上挂载了 _render 办法，该办法在 mount 的过程中会被调用生成一个 vnode 实例用于 update 比照生成一个新的 dom 对象并对原 dom 节点进行替换, 该办法将会拿到 option 上定义 render 办法：

  • 用户自定义的render
  • tamplate 用户自定义的是这样的
new Vue({
    el:"#app",
    render(createElement){
        return createElement("div",{
            attr:{id:"app"}
        },this.message)
    },
    data(){
        return {message:"hello"}
    }
})

一种则是应用的 template 形式，然而该办法最终在 mount 的过程中通过调用 compileToFunctions 会被转化 render 函数，也就是说，最终供 _render 办法应用的实际上就是咱们自定义的 render 函数, 在初始化 render 中会代理 Vue 实例 vm._renderProxy，其实就是vue，那么vm.$createElement 就是增加在 Vue 原型上的一个办法 （initRender 阶段），所以就是createElement 办法

/** * 创立 vnode 节点, 实质上是调_createElement 办法, 这里做一层封装, 来兼容更多状况 */
export function createElement (
  context: Component,
  tag: any,
  data: any,
  children: any,
  normalizationType: any,
  alwaysNormalize: boolean
): VNode | Array<VNode> {if (Array.isArray(data) || isPrimitive(data)) {
    normalizationType = children
    children = data
    data = undefined
  }
  // 依据 normalizationType 的不同, 后续解决 children 的形式也不同, 详见 core/vdom/helpers/normalzie-children.js
  if (isTrue(alwaysNormalize)) {normalizationType = ALWAYS_NORMALIZE}
  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> {
  // 如果节点的 data 曾经是响应式, 即已有__ob__属性, 间接返回空节点并收回正告
  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}
  // 没有 tag 字段的组件间接返回一个空节点
  if (!tag) {
    // in case of component :is set to falsy value
    return createEmptyVNode()}
  // warn against non-primitive key
  // 查看 key 是否是 string or number
  if (process.env.NODE_ENV !== 'production' &&
    isDef(data) && isDef(data.key) && !isPrimitive(data.key)
  ) {if (!__WEEX__ || !('@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
  // 对于 children 数组的两种解决形式, 详见 helper/normalize-children.js
  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
  /**   * 先对 tag 进行判断 如果是 string，接着判断是否是 dom 内置的节点，如果是则间接创立一个一般 VNode   * 如果是为已注册的组件名，则通过 createComponent 创立一个组件类型的 VNode   * 否则创立一个未知的标签的 VNode   *    * 如果 tag 是 Component 类型, 通过 createComponent 创立一个节点   */
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      vnode = new VNode(config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } 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 = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  // 对 vnode 进行标准化解决, 保障每次都返回一个规范格局的 vnode
  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()
  }
}

// 对每个 children 节点利用命名空间
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) && child.tag !== 'svg'))) {applyNS(child, ns, force)
      }
    }
  }
}

// ref #5318
// necessary to ensure parent re-render when deep bindings like :style and
// :class are used on slot nodes
// 对于 style 和 class 进行深度递归绑定
function registerDeepBindings (data) {if (isObject(data.style)) {traverse(data.style)
  }
  if (isObject(data.class)) {traverse(data.class)
  }
}

其中在判断 ALWAYS_NORMALIZE 与normalizationType时候，用户手写的 ALWAYS_NORMALIZE 始终是true，所以就会调用normalizeChildren（children）

export function simpleNormalizeChildren (children: any) {for (let i = 0; i < children.length; i++) {if (Array.isArray(children[i])) {return Array.prototype.concat.apply([], children)
    }
  }
  return children
}

export function normalizeChildren (children: any): ?Array<VNode> {return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}
  • 当 childre 是子组件的时候就会扁平化
  • 当 children 是根底数据类型的时候，间接调用 createTextNode 函数变成文本节点
  • 当 children 是数组的时候，会调用 normalizeArrayChildren 进行格式化
    最初调用 vnode = new VNode() 生成一个 vnode。
    这一章解说了 generate 解析 AST 对象生成 render function code 在到 虚构 VNode是怎么生成进去的，下一章讲一个外围概念diff 算法

正文完
前端
发表至： 前端
2023-02-27
 0
关于前端:使用-Chrome-开发者工具分析-SAP-UI5-应用的-JavaScript-代码执行性能瓶颈试读版
关于前端:什么是-Angular-library-的-secondary-entry-points
关于前端:jsliang-求职系列-06-Event-Loop
关于前端:七步实现列表点击事件的采集