从template到DOM(Vue.js源码角度看内部运行机制)

　　写在前面

　　这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧，在阅读源码的过程中也确实受益匪浅，希望自己的这些产出也会对同样想要学习Vue.js源码的小伙伴有所帮助。之前这篇文章同样在我司(大搜车)的技术博客中发表过，欢迎大家关注我司的技术博客，给个传送门https://blog.souche.com/。

　　因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。

　　可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。

　　从new一个Vue对象开始

　　let vm = new Vue({

　　el: '#app',

　　/*some options*/

　　});

　　很多同学好奇，在new一个Vue对象的时候，内部究竟发生了什么?

　　究竟Vue.js是如何将data中的数据渲染到真实的宿主环境环境中的?

　　又是如何通过“响应式”修改数据的?

　　template是如何被编译成真实环境中可用的HTML的?

　　Vue指令又是执行的?

　　带着这些疑问，我们从Vue的构造类开始看起。

　　Vue构造类

　　function Vue (options) {

　　if (process.env.NODE_ENV !== 'production' &&

　　!(this instanceof Vue)) {

　　warn('Vue is a constructor and should be called with the `new` keyword')

　　}

　　/*初始化*/

　　this._init(options)

　　}

　　Vue的构造类只做了一件事情，就是调用_init函数进行

　　来看一下init的代码

　　Vue.prototype._init = function (options?: Object) {

　　const vm: Component = this

　　// a uid

　　vm._uid = uid++

　　let startTag, endTag

　　/* istanbul ignore if */

　　if (process.env.NODE_ENV !== 'production' && config.performance && mark) {

　　startTag = `vue-perf-init:${vm._uid}`

　　endTag = `vue-perf-end:${vm._uid}`

　　mark(startTag)

　　}

　　// a flag to avoid this being observed

　　/*一个防止vm实例自身被观察的标志位*/

　　vm._isVue = true

　　// merge options

　　if (options && options._isComponent) {

　　// optimize internal component instantiation

　　// since dynamic options merging is pretty slow, and none of the

　　// internal component options needs special treatment.

　　initInternalComponent(vm, options)

　　} else {

　　vm.$options = mergeOptions(

　　resolveConstructorOptions(vm.constructor),

　　options || {},

　　vm

　　)

　　}

　　/* istanbul ignore else */

　　if (process.env.NODE_ENV !== 'production') {

　　initProxy(vm)

　　} else {

　　vm._renderProxy = vm

　　}

　　// expose real self

　　vm._self = vm

　　/*初始化生命周期*/

　　initLifecycle(vm)

　　/*初始化事件*/

　　initEvents(vm)

　　/*初始化render*/

　　initRender(vm)

　　/*调用beforeCreate钩子函数并且触发beforeCreate钩子事件*/

　　callHook(vm, 'beforeCreate')

　　initInjections(vm) // resolve injections before data/props

　　/*初始化props、methods、data、computed与watch*/

　　initState(vm)

　　initProvide(vm) // resolve provide after data/props

　　/*调用created钩子函数并且触发created钩子事件*/

　　callHook(vm, 'created')

　　/* istanbul ignore if */

　　if (process.env.NODE_ENV !== 'production' && config.performance && mark) {

　　/*格式化组件名*/

　　vm._name = formatComponentName(vm, false)

　　mark(endTag)

　　measure(`${vm._name} init`, startTag, endTag)

　　}

　　if (vm.$options.el) {

　　/*挂载组件*/

　　vm.$mount(vm.$options.el)

　　}

　　}

　　_init主要做了这两件事：

　　1.初始化(包括生命周期、事件、render函数、state等)。

　　2.$mount组件。

　　在生命钩子beforeCreate与created之间会初始化state，在此过程中，会依次初始化props、methods、data、computed与watch，这也就是Vue.js对options中的数据进行“响应式化”(即双向绑定)的过程。对于Vue.js响应式原理不了解的同学可以先看一下笔者的另一片文章《Vue.js响应式原理》。

　　/*初始化props、methods、data、computed与watch*/

　　export function initState (vm: Component) {

　　vm._watchers = []

　　const opts = vm.$options

　　/*初始化props*/

　　if (opts.props) initProps(vm, opts.props)

　　/*初始化方法*/

　　if (opts.methods) initMethods(vm, opts.methods)

　　/*初始化data*/

　　if (opts.data) {

　　initData(vm)

　　} else {

　　/*该组件没有data的时候绑定一个空对象*/

　　observe(vm._data = {}, true /* asRootData */)

　　}

　　/*初始化computed*/

　　if (opts.computed) initComputed(vm, opts.computed)

　　/*初始化watchers*/

　　if (opts.watch) initWatch(vm, opts.watch)

　　}

　　双向绑定

　　以initData为例，对option的data的数据进行双向绑定Oberver，其他option参数双向绑定的核心原理是一致的。

　　function initData (vm: Component) {

　　/*得到data数据*/

　　let data = vm.$options.data

　　data = vm._data = typeof data === 'function'

　　? getData(data, vm)

　　: data || {}

　　/*判断是否是对象*/

　　if (!isPlainObject(data)) {

　　data = {}

　　process.env.NODE_ENV !== 'production' && warn(

　　'data functions should return an object:\n' +

　　'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',

　　vm

　　)

　　}

　　// proxy data on instance

　　/*遍历data对象*/

　　const keys = Object.keys(data)

　　const props = vm.$options.props

　　let i = keys.length

　　//遍历data中的数据

　　while (i--) {

　　/*保证data中的key不与props中的key重复，props优先，如果有冲突会产生warning*/

　　if (props && hasOwn(props, keys[i])) {

　　process.env.NODE_ENV !== 'production' && warn(

　　`The data property "${keys[i]}" is already declared as a prop. ` +

　　`Use prop default value instead.`,

　　vm

　　)

　　} else if (!isReserved(keys[i])) {

　　/*判断是否是保留字段*/

　　/*这里是我们前面讲过的代理，将data上面的属性代理到了vm实例上*/

　　proxy(vm, `_data`, keys[i])

　　}

　　}

　　/*Github:https://github.com/answershuto*/

　　// observe data

　　/*从这里开始我们要observe了，开始对数据进行绑定，这里有尤大大的注释asRootData，这步作为根数据，下面会进行递归observe进行对深层对象的绑定。*/

　　observe(data, true /* asRootData */)

　　}

　　observe会通过defineReactive对data中的对象进行双向绑定，最终通过Object.defineProperty对对象设置setter以及getter的方法。getter的方法主要用来进行依赖收集，对于依赖收集不了解的同学可以参考笔者的另一篇文章《依赖收集》。setter方法会在对象被修改的时候触发(不存在添加属性的情况，添加属性请用Vue.set)，这时候setter会通知闭包中的Dep，Dep中有一些订阅了这个对象改变的Watcher观察者对象，Dep会通知Watcher对象更新视图。

　　如果是修改一个数组的成员，该成员是一个对象，那只需要递归对数组的成员进行双向绑定即可。但这时候出现了一个问题，?如果我们进行pop、push等操作的时候，push进去的对象根本没有进行过双向绑定，更别说pop了，那么我们如何监听数组的这些变化呢?

　　Vue.js提供的方法是重写push、pop、shift、unshift、splice、sort、reverse这七个数组方法。修改数组原型方法的代码可以参考observer/array.js以及observer/index.js。

　　export class Observer {

　　value: any;

　　dep: Dep;

　　vmCount: number; // number of vms that has this object as root $data

　　constructor (value: any) {

　　//.......

　　if (Array.isArray(value)) {

　　/*

　　如果是数组，将修改后可以截获响应的数组方法替换掉该数组的原型中的原生方法，达到监听数组数据变化响应的效果。

　　这里如果当前浏览器支持__proto__属性，则直接覆盖当前数组对象原型上的原生数组方法，如果不支持该属性，则直接覆盖数组对象的原型。

　　*/

　　const augment = hasProto

　　? protoAugment /*直接覆盖原型的方法来修改目标对象*/

　　: copyAugment /*定义(覆盖)目标对象或数组的某一个方法*/

　　augment(value, arrayMethods, arrayKeys)

　　/*如果是数组则需要遍历数组的每一个成员进行observe*/

　　this.observeArray(value)

　　} else {

　　/*如果是对象则直接walk进行绑定*/

　　this.walk(value)

　　}

　　}

　　}

　　/**

　　* Augment an target Object or Array by intercepting

　　* the prototype chain using __proto__

　　*/

　　/*直接覆盖原型的方法来修改目标对象或数组*/

　　function protoAugment (target, src: Object) {

　　/* eslint-disable no-proto */

　　target.__proto__ = src

　　/* eslint-enable no-proto */

　　}

　　/**

　　* Augment an target Object or Array by defining

　　* hidden properties.

　　*/

　　/* istanbul ignore next */

　　/*定义(覆盖)目标对象或数组的某一个方法*/

　　function copyAugment (target: Object, src: Object, keys: Array) {

　　for (let i = 0, l = keys.length; i < l; i++) {

　　const key = keys[i]

　　def(target, key, src[key])

　　}

　　}

　　/*

　　* not type checking this file because flow doesn't play well with

　　* dynamically accessing methods on Array prototype

　　*/

　　import { def } from '../util/index'

　　/*取得原生数组的原型*/

　　const arrayProto = Array.prototype

　　/*创建一个新的数组对象，修改该对象上的数组的七个方法，防止污染原生数组方法*/

　　export const arrayMethods = Object.create(arrayProto)

　　/**

　　* Intercept mutating methods and emit events

　　*/

　　/*这里重写了数组的这些方法，在保证不污染原生数组原型的情况下重写数组的这些方法，截获数组的成员发生的变化，执行原生数组操作的同时dep通知关联的所有观察者进行响应式处理*/

　　;[

　　'push',

　　'pop',

　　'shift',

　　'unshift',

　　'splice',

　　'sort',

　　'reverse'

　　]

　　.forEach(function (method) {

　　// cache original method

　　/*将数组的原生方法缓存起来，后面要调用*/

　　const original = arrayProto[method]

　　def(arrayMethods, method, function mutator () {

　　// avoid leaking arguments:

　　// http://jsperf.com/closure-with-arguments

　　let i = arguments.length

　　const args = new Array(i)

　　while (i--) {

　　args[i] = arguments[i]

　　}

　　/*调用原生的数组方法*/

　　const result = original.apply(this, args)

　　/*数组新插入的元素需要重新进行observe才能响应式*/

　　const ob = this.__ob__

　　let inserted

　　switch (method) {

　　case 'push':

　　inserted = args

　　break

　　case 'unshift':

　　inserted = args

　　break

　　case 'splice':

　　inserted = args.slice(2)

　　break

　　}

　　if (inserted) ob.observeArray(inserted)

　　// notify change

　　/*dep通知所有注册的观察者进行响应式处理*/

　　ob.dep.notify()

　　return result

　　})

　　})

　　从数组的原型新建一个Object.create(arrayProto)对象，通过修改此原型可以保证原生数组方法不被污染。如果当前浏览器支持proto这个属性的话就可以直接覆盖该属性则使数组对象具有了重写后的数组方法。如果没有该属性的浏览器，则必须通过遍历def所有需要重写的数组方法，这种方法效率较低，所以优先使用第一种。

　　在保证不污染不覆盖数组原生方法添加监听，主要做了两个操作，第一是通知所有注册的观察者进行响应式处理，第二是如果是添加成员的操作，需要对新成员进行observe。勃起后很快变软是怎么回事呢

　　但是修改了数组的原生方法以后我们还是没法像原生数组一样直接通过数组的下标或者设置length来修改数组，Vue.js提供了remove()方法。

　　对于更具体的讲解数据双向绑定以及Dep、Watcher的实现可以参考笔者的文章《从源码角度再看数据绑定》。

　　template编译

　　在$mount过程中，如果是独立构建构建，则会在此过程中将template编译成render function。当然，你也可以采用运行时构建。具体参考运行时-编译器-vs-只包含运行时。

　　template是如何被编译成render function的呢?

　　function baseCompile (

　　template: string,

　　options: CompilerOptions

　　): CompiledResult {

　　/*parse解析得到ast树*/

　　const ast = parse(template.trim(), options)

　　/*

　　将AST树进行优化

　　优化的目标：生成模板AST树，检测不需要进行DOM改变的静态子树。

　　一旦检测到这些静态树，我们就能做以下这些事情：

　　1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。

　　2.在patch的过程中直接跳过。

　　*/

　　optimize(ast, options)

　　/*根据ast树生成所需的code(内部包含render与staticRenderFns)*/

　　const code = generate(ast, options)

　　return {

　　ast,

　　render: code.render,

　　staticRenderFns: code.staticRenderFns

　　}

　　}

　　baseCompile首先会将模板template进行parse得到一个AST语法树，再通过optimize做一些优化，最后通过generate得到render以及staticRenderFns。

　　pars

　　parse会用正则等方式解析template模板中的指令、class、style等数据，形成AST语法树。

　　optimize

　　optimize的主要作用是标记static静态节点，这是Vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能。成都男性阴茎弯曲怎么回事?

　　generate

　　generate是将AST语法树转化成render funtion字符串的过程，得到结果是render的字符串以及staticRenderFns字符串。

　　具体的template编译实现请参考《聊聊Vue.js的template编译》。

　　Watcher到视图

　　Watcher对象会通过调用updateComponent方法来达到更新视图的目的。这里提一下，其实Watcher并不是实时更新视图的，Vue.js默认会将Watcher对象存在一个队列中，在下一个tick时更新异步更新视图，完成了性能优化。关于nextTick感兴趣的小伙伴可以参考《Vue.js异步更新DOM策略及nextTick》。

　　updateComponent = () => {

　　vm._update(vm._render(), hydrating)

　　}

　　updateComponent就执行一句话，_render函数会返回一个新的Vnode节点，传入_update中与旧的VNode对象进行对比，经过一个patch的过程得到两个VNode节点的差异，最后将这些差异渲染到真实环境形成视图。

　　什么是VNode?

　　VNode

　　在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。

　　那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。成都九龙医院治疗早泄怎么样

　　但是这样的JavaScript操作DOM进行重绘整个视图层是相当消耗性能的，我们是不是可以每次只更新它的修改呢?所以Vue.js将DOM抽象成一个以JavaScript对象为节点的虚拟DOM树，以VNode节点模拟真实DOM，可以对这颗抽象树进行创建节点、删除节点以及修改节点等操作，在这过程中都不需要操作真实DOM，只需要操作JavaScript对象，大大提升了性能。修改以后经过diff算法得出一些需要修改的最小单位，再将这些小单位的视图进行更新。这样做减少了很多不需要的DOM操作，大大提高了性能。

　　Vue就使用了这样的抽象节点VNode，它是对真实DOM的一层抽象，而不依赖某个平台，它可以是浏览器平台，也可以是weex，甚至是node平台也可以对这样一棵抽象DOM树进行创建删除修改等操作，这也为前后端同构提供了可能。