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

总结

相关文章

技术招聘演化论：怎样从纸上答题升级到实战编程？

RealBasicVSR~ 拯救你的低清图片

55_使用Sync和Send来扩展并发

推荐常用的六个插件武装你的Chrome（附带文件下载）

作者信息

render函数生成虚拟`DOM`

虚拟`DOM`