Vue渲染DOM节点

Virtual DOM

Vue实例挂载的最后一个环节：渲染DOM节点。在渲染真实DOM的过程中，Vue引进了虚拟DOM的概念，虚拟DOM作为JS对象和真实DOM中间的一个缓冲存，极大的优化了JS频繁操作DOM的性能问题

• 浏览器的渲染流程
  当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。而JS引擎的作用是通过DOM相关的API去操作DOM对象，而当我们操作DOM时，很容易触发到渲染引擎的回流或者重绘。
• 回流： 当我们对DOM的修改引发了元素尺寸的变化时，浏览器需要重新计算元素的大小和位置，最后将重新计算的结果绘制出来，这个过程称为回流。
• 重绘： 当我们对DOM的修改只单纯改变元素的颜色时，浏览器此时并不需要重新计算元素的大小和位置，而只要重新绘制新样式。这个过程称为重绘。
  很显然回流比重绘更加耗费性能
  通过了解浏览器基本的渲染机制，我们很容易联想到当不断的通过JS修改DOM时，不经意间会触发到渲染引擎的回流或者重绘，而这个性能开销是非常巨大的。因此为了降低开销，我们可以做的是尽可能减少DOM操作。
• 缓冲层-虚拟DOM
  虚拟DOM是优化频繁操作DOM引发性能问题的产物。虚拟DOM(下面称为Virtual DOM)是将页面的状态抽象为JS对象的形式，本质上是JS和真实DOM的中间层，当我们想用JS脚本大批量进行DOM操作时，会优先作用于Virtual DOM这个JS对象，最后通过对比将要改动的部分通知并更新到真实的DOM。尽管最终还是操作真实的DOM，但Virtual DOM可以将多个改动合并成一个批量的操作，从而减少 dom 重排的次数，进而缩短了生成渲染树和绘制所花的时间。
  我们看一个真实的DOM包含了什么：
  
  浏览器将一个真实DOM设计得很复杂，不仅包含了自身的属性描述，大小位置等定义，也囊括了DOM拥有的浏览器事件等。正因为如此复杂的结构，我们频繁去操作DOM或多或少会带来浏览器性能问题。而作为数据和真实DOM之间的一层缓冲，Virtual DOM 只是用来映射到真实DOM的渲染，因此不需要包含操作 DOM的方法，只要在对象中重点关注几个属性即可。

// 真实DOM
dom

// 真实DOM对应的JS对象
{
    tag: 'div',
    data: {
        id: 'real'
    },
    children: [{
        tag: 'span',
        children: 'dom'
    }]
}

• Vnode
Vue源码在渲染机制的优化上，同样引进了virtual dom的概念，它是用Vnode这个构造函数去描述一个DOM节点。

var VNode = function VNode (tag,data,children,text,elm,context,componentOptions,asyncFactory) {
     
    this.tag = tag; // 标签
    this.data = data;  // 数据
    this.children = children; // 子节点
    this.text = text;
    ···
    ···
  };

Vnode定义的属性也差不多有20几个，这里列举大部分属性，只重点关注几个关键属性：标签名，数据，子节点。其他的属性都是用来扩展Vue的灵活性。

• Vnode的创建
  先简单回顾一下挂载的流程，挂载的过程调用的是Vue实例上$mount方法，而$mount的核心是mountComponent方法。在这之前，如果我们传递的是template模板，会经过一系列的模板编译过程，并根据不同平台生成对应代码，浏览器对应的是render函数;如果传递的是render函数，则忽略模板编译过程。有了render函数后，调用vm._render()方法会将render函数转化为Virtual DOM，最终利用vm._update()将Virtual DOM渲染为真实的DOM。

Vue.prototype.$mount = function(el, hydrating) {
     
    ···
    return mountComponent(this, el)
}
function mountComponent() {
     
    ···
    updateComponent = function () {
     
        vm._update(vm._render(), hydrating);
    };
}

vm._render()方法会将render函数转化为Virtual DOM,我们看源码中如何定义的。

// 引入Vue时，执行renderMixin方法，该方法定义了Vue原型上的几个方法，其中一个便是 _render函数
renderMixin();//
function renderMixin() {
     
    Vue.prototype._render = function() {
     
        var ref = vm.$options;
        var render = ref.render;
        ···
        try {
     
            vnode = render.call(vm._renderProxy, vm.$createElement);
        } catch (e) {
     
            ···
        }
        ···
        return vnode
    }
}

抛开其他代码，_render函数的核心是render.call(vm._renderProxy, vm.$createElement)部分，vm.$createElement方法会作为render函数的参数传入。这个参数也是在手写render函数时使用的createElement参数的由来