vue单文件组件是如何一步一步渲染成DOM？-六虎

本文正在参与「金石方案 . 分割6万现金大奖」

在 vue 项目中有一个main.js的进口文件，代码如下:

import Vue from 'vue'
import App from './App.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

你是否知道当咱们履行这个文件时 vue 是怎么把 App.vue单文件组件转化为实在的DOM烘托在浏览器中的？

那今天小编来尝试盘一盘这个问题。

new Vue 发生了什么

首要来看一下Vue的函数类:

function Vue (options) {
  this._init(options)
}

在实例化的进程中调用了this._init办法，该办法的首要作用是:

首要进行装备合并，在实例化时传入了一个options目标，这个目标和Vue结构函数本身上的options做一个合并，这样实例的$options就具有了一些其他特点和办法；
在vue实例上vm上挂载了一些特点和办法，比如$createElement办法；
把options里边的data变为呼应式；
调用vm.$mount办法挂载，挂载的目标便是把模板烘托成终究的 DOM。

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  ...  
  // 合并装备，并在vm上挂载$options
  vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
  )
  ...
  // 进行一系列的初始化，即往实例上添加办法和特点
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm)
  // 把data变成呼应式
  initState(vm) 
  initProvide(vm)
  callHook(vm, 'created')
  ...
  // 挂载
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

那么接下来咱们来剖析 Vue 的挂载进程。

const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (el){
  // 传入一个id，经过id获取的dom目标，记住是实在dom query:document.querySelector(el)
  el = el && query(el)
  ...
  const options = this.$options
  // 假如options中没有render函数
  if (!options.render) {
    let template = options.template
    if (template) {
      ...
      // 获取模板字符串
      template = template.innerHTML
      ...
    } else if (el) {
      // 假如没有template特点，那么就从el中获取dom的字符串  
      template = getOuterHTML(el)
    }
    if (template) {
      // 把模板字符串转化为render函数
      const { render, staticRenderFns } = compileToFunctions(template...)
      // 把render函数放在options目标上
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  return mount.call(this, el, hydrating)
}

这段代码首要缓存了原型上的$mount办法，再从头界说该办法。

首要判别是否界说render办法，假如没有则会把el或许template字符串经过compileToFunctions函数转换成render办法。

在实际的项目中，咱们一般是用.vue的单文件的方式开发，很少有自己写render办法的，下面便是用render办法来写组件:

new Vue({
  el: '#app',
  data() {
    return {
      message: 'hello vue'
    }
  },
  render(createElement) {
    return createElement(
      'div',
      {
        attrs: {
          id: 'app1'
        }
      },
      this.message
    )
  }
})

这儿咱们要牢记，在 Vue 2.0 版别中，一切 Vue 的组件的烘托终究都需求render办法，不管咱们是用单文件 .vue 方式开发组件，仍是写了el或许template特点，终究都会转换成render办法，那么这个进程是 Vue 的一个在线编译的进程，它是调用compileToFunctions办法实现的，编译进程咱们之后会介绍。

终究，调用原先原型上的$mount办法挂载。原先原型上的$mount办法在src/platform/web/runtime/index.js中界说，之所以这么规划彻底是为了复用，由于它是能够被runtime only版别的 Vue 直接使用的。

Vue.prototype.$mount = function (el) {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el)
}
export function mountComponent (vm, el) {
  vm.$el = el
  ...
  callHook(vm, 'beforeMount')
  ...
  let updateComponent
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }
  // 这一块后面会要点介绍
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true)
  ...
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

从上面的代码能够看到，mountComponent核心便是先实例化一个烘托Watcher，在它的实例化中会调用updateComponent办法，在此办法中调用vm._render办法先生成虚拟DOM，终究调用vm._update更新 DOM。

render函数生成虚拟`DOM`

虚拟`DOM`

虚拟 DOM 这个概念信任大部分人都不会生疏，它发生的条件是浏览器中的 DOM 是很”贵重”的，为了更直观的感触，咱们能够简单的把一个简单的 div 元素的特点都打印出来，如图所示:

能够看到，实在的 DOM 元素是十分庞大的，由于浏览器的标准就把 DOM 规划的十分复杂。当咱们频频的去做 DOM 更新，会发生一定的功能问题。

而虚拟 DOM 便是用一个原生的 JS 目标去描绘一个 DOM 节点，所以它比创立一个 DOM 的价值要小很多。在 Vue.js 中，虚拟DOM 是用VNode这么一个 Class 去描绘：

export default class VNode {
  constructor (tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Component ...
  ) {
    this.tag = tag
    this.data = data // 标签特点
    this.children = children // 子节点
    this.text = text // 文本节点
    this.elm = elm // 虚拟dom所对应的实在dom节点
    ...
  }
  get child (): Component | void {
    return this.componentInstance
  }
}

其实 VNode 是对实在 DOM 的一种抽象描绘，它的核心界说无非就几个要害特点，标签名、数据、子节点、键值等。由于 VNode 仅仅用来映射到实在 DOM 的烘托，不需求包含操作 DOM 的办法，因而它是十分轻量和简单的。

render函数

Vue 的_render办法用来把实例烘托成一个虚拟 Node。里边调用了$options.render办法，这个办法是在打包编译时利用vue-loader把咱们写的单文件(.vue)里边的template编译为render函数：

Vue.prototype._render = function (): VNode {
  const vm = this
  const { render, _parentVnode } = vm.$options
  ...
  let vnode
  vnode = render.call(vm._renderProxy, vm.$createElement)
  return vnode
}

在调用$options.render时传入了vm.$createElement办法，该办法又调用了_createElement:

export function _createElement (context,tag,data,children,normalizationType
) {
  ...
  // 假如没有传tag，则创立一个空vnode
  if (!tag) {
    return createEmptyVNode();
  }
  // 首要对children创立vnode，先子后父
  children = normalizeChildren(children)
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    // 假如是渠道保存的标签名，比如浏览器环境下的div标签
    if (config.isReservedTag(tag)) {
      // 生成vnode
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if (isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // 判别是否是一个组件，假如是则创立一个组件
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // 假如tag是一个目标，阐明是一个组件
    vnode = createComponent(tag, data, context, children)
  }
  ...
  return vnode
}

咱们以如下代码来剖析_createElement的运转进程，下面代码中的children有两个子节点，一个是文本节点，一个是继续调用_createElement生成一个vnode。

new Vue({
  el: '#app',
  data() {
    return {
      message: 'hello vue'
    }
  },
  render(createElement) {
    return createElement(
      'div',
      {
        attrs: {
          id: 'app1'
        }
      },
      [
          createElement('div', 'pengchangjun'), 
          this.message
      ]
    )
  }
})

当履行这段代码时，首要调用children里边的createElement办法(先子后父)，然后履行normalizeChildren函数:

export function normalizeChildren (children: any): ?Array<VNode> {
  return isPrimitive(children)
    ? [createTextVNode(children)]
    : Array.isArray(children)
      ? normalizeArrayChildren(children)
      : undefined
}
function normalizeArrayChildren (children, nestedIndex) {
  var res = [];
  var i, c, lastIndex, last;
  for (i = 0; i < children.length; i++) {
    c = children[i];
    ...
    //  nested 嵌套数组
    if (Array.isArray(c)) {
      if (c.length > 0) {
        c = normalizeArrayChildren(c, ((nestedIndex || '') + "_" + i));
        ...
        res.push.apply(res, c);
      }
    } else if (isPrimitive(c)) {
        // 假如是原始类型则生成一个文本vnode
        res.push(createTextVNode(c));
    } else {
      // 假如已经是vnode类型，则直接push
      ...
      res.push(c);
    }
  }
  return res
}

履行完成后，此时的children已转为化虚拟dom:

[
  {
    // 这是一个VNode目标
    tag: 'div',
    data: undefined,
    text: undefined,
    children: [
      {
        // 这是一个vnode目标
        tag: undefined,
        data: undefined,
        children: undefined,
        text: 'pengchangjun',
        ...
      }
    ]
  },
  // 这是一个文本vnode
  {
    tag: undefined,
    data: undefined,
    children: undefined,
    text: 'hello vue',
    ...
  }
]

继续履行，由于tag是一个html保存标签，所以履行:

vnode = new VNode(
    config.parsePlatformTagName(tag), data, children,   undefined, undefined,     context
)

终究生成的虚拟dom长成这个样子：


{
  tag: 'div',
  data: {
    attrs: {
      id: 'app1'
    }
  },
  children: [
    {
      // 这是一个VNode目标
      tag: 'div',
      data: undefined,
      text: undefined,
      children: [
        {
          // 这是一个vnode目标
          tag: undefined,
          data: undefined,
          children: undefined,
          text: 'pengchangjun',
          ...
        }
      ]
    },
    // 这是一个文本vnode
    {
      tag: undefined,
      data: undefined,
      children: undefined,
      text: 'hello vue',
      ...
    }
  ]
  text: undefined,
  elm: undefined
}

那么至此，咱们大致了解了createElement创立 VNode 的进程，每个 VNode 有children，children每个元素也是一个 VNode，这样就形成了一个 VNode Tree，它很好的描绘了咱们的 DOM Tree。

虚拟DOM生成实在DOM

咱们已经知道vm._render是怎么创立了一个 VNode，接下来便是要把这个 VNode 烘托成一个实在的 DOM 并烘托出来，这个进程是经过vm._update完成的。

Vue 的_update被调用的机遇有 2 个，一个是初次烘托，一个是数据更新的时分；本文只剖析初次烘托部分。该办法的作用是把 VNode 烘托成实在的 DOM：

Vue.prototype._update = function (vnode: VNode) {
  const vm = this
  ...
  // 初次烘托
  vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false)
  ...
}
Vue.prototype.__patch__ = inBrowser ? patch : noop
const patch: Function = createPatchFunction({ nodeOps, modules })

createPatchFunction内部界说了一系列的辅助办法，终究回来了一个patch办法，这个办法就赋值给了vm._update函数里调用的vm.__patch__。

export function createPatchFunction (backend) {
  function createElm() {}
  ...
  // 回来patch办法
  return function patch (oldVnode, vnode, hydrating, removeOnly) {
      ...
      // 判别是否是一个实在dom，初次烘托的时分oldVnode是一个实在dom
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
      } else {
        if (isRealElement) {
          ... 
         // 把实在dom转化为一个空的vnode，这个空vnode的特点elm值为实在dom，做了一个相关
          oldVnode = emptyNodeAt(oldVnode)
        }
        // 每个vnode都有一个elm特点，这个特点是用该节点的tag生成的一个实在dom节点，它的作用是作为子节点的父节点，便利经过appendChild办法把子节点刺进。
        const oldElm = oldVnode.elm
        // 经过实在dom获取父级，这儿初次烘托的父级便是body标签
        const parentElm = nodeOps.parentNode(oldElm)
        // 创立实在dom节点
        createElm(
          vnode,
          insertedVnodeQueue,
          // 传入父级节点，这样子节点能够appendChild办法刺进到父级节点中
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )
        ... 
        // 删除老的节点
        if (isDef(parentElm)) {
          removeVnodes(parentElm, [oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          invokeDestroyHook(oldVnode)
        }
      }
    }
    // 回来实在dom节点
    return vnode.elm
  }
}

下面经过一个简单的比如看下patch的进程:

var app = new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement('div', {
      attrs: {
        id: 'app1'
      },
    }, this.message)
  },
  data: {
    message: 'Hello Vue!'
  }
})

初次烘托在vm._update的办法里是这么调用patch办法的：

vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false)

在履行patch函数的时分，传入的vm.$el对应的是比如中 id 为app的 DOM 目标，这个也便是咱们在 index.html 模板中写的<div id="app">，vm.$el的赋值是在之前mountComponent函数做的。

由于咱们传入的oldVnode实际上是一个 DOM container，所以isRealElement为 true，接下来又经过emptyNodeAt办法把oldVnode(vm.$el)转换成VNode目标，然后再调用createElm办法:

function createElm (vnode, insertedVnodeQueue, parentElm...) {
  ... 
  const data = vnode.data // dom的特点，比如id，class等
  const children = vnode.children // 子节点
  const tag = vnode.tag // 标签名
  if (isDef(tag)) {
    // 对于当时的vnode创立一个container节点容器，当时vnode的子节点转化为实在DOM之后都会刺进到vnode.elm上
    vnode.elm = nodeOps.createElement(tag, vnode)
    ...
    // 创立子节点
    createChildren(vnode, children, insertedVnodeQueue)
    // 假如存在标签特点如id,class等，则往标签里边刺进特点
    if (isDef(data)) {
      // 创立成功后，履行create阶段的钩子
      invokeCreateHooks(vnode, insertedVnodeQueue)
    }
    // 把vnode的生成的实在节点刺进到父节点body中
    insert(parentElm, vnode.elm, refElm)
    ...
  } else if (isTrue(vnode.isComment)) {
    vnode.elm = nodeOps.createComment(vnode.text)
    insert(parentElm, vnode.elm, refElm)
  } else {
    // 对于文本节点是没有tag的，所以会走到这个逻辑
    vnode.elm = nodeOps.createTextNode(vnode.text)
    insert(parentElm, vnode.elm, refElm)
  }
}
// nodeOps.createElement(tag, vnode)
export function createElement (tagName: string, vnode: VNode): Element {
  const elm = document.createElement(tagName)
  ...
  return elm
}

接下来调用createChildren办法去创立子元素:

createChildren(vnode, children, insertedVnodeQueue)
function createChildren (vnode, children, insertedVnodeQueue) {
  if (Array.isArray(children)) {
    ...
    for (let i = 0; i < children.length; ++i) {
      // vnode.elm作为父节点容器
      createElm(children[i], insertedVnodeQueue, vnode.elm, null, true, children, i)
    }
  } else if (isPrimitive(vnode.text)) {
    nodeOps.appendChild(vnode.elm, nodeOps.createTextNode(String(vnode.text)))
  }
}

createChildren的逻辑很简单，实际上是遍历子虚拟节点，递归调用createElm，这是一种常用的深度优先的遍历算法，这儿要注意的一点是在遍历进程中会把vnode.elm作为父容器的 DOM 节点占位符传入。

终究调用insert办法把DOM刺进到父节点中，由于是递归调用，子元素会优先调用insert，所以整个vnode树节点的刺进次序是先子后父。来看一下insert办法：

insert(parentElm, vnode.elm, refElm)
function insert (parent, elm) {
  ...
  appendChild(parent, elm)
}
export function appendChild (node: Node, child: Node) {
  node.appendChild(child)
}

其实便是调用原生 DOM 的 API 进行 DOM 操作，看到这儿就恍然大悟了，原来 Vue 是这样动态创立的 DOM。

再回到patch办法，初次烘托咱们调用了createElm办法，这儿传入的parentElm是oldVnode.elm的父元素，在咱们的比如是 id 为#appdiv 的父元素，也便是 Body节点；实际上整个进程便是递归创立了一个完好的 DOM 树并刺进到 Body 上。

总结

那么至此咱们从主线上把模板和数据怎么烘托成终究的 DOM 的进程剖析完毕了，咱们能够经过下图更直观地看到从初始化 Vue 到终究烘托的整个进程。

vue单文件组件是如何一步一步渲染成DOM？

new Vue 发生了什么

render函数生成虚拟DOM

虚拟DOM

render函数

虚拟DOM生成实在DOM

总结

相关文章

【2021年度总结】2021年度学习总结，学无止境，展望2022

mac上编译skia

如何使用 Chrome DevTools 远程调试 Android 设备上的 WebView？

Java多线程+分治求和，太牛了

作者信息

render函数生成虚拟`DOM`

虚拟`DOM`