vue-4

2-2 数据驱动
这一章主要分析当我们声明一个插值变量，vue是如何把这个变量渲染到真实dom上的。

首先是调试过程，我们最好是使用Runtime+compiler版本的，这样的话脚手架会给webpack.base.conf.js中的resolve添加一行代码：

'vue': resolve('node_modules/vue/dist/vue.esm.js')

这个就是一个带compiler版本的代码，然后我们找到这个文件在里面的_init方法加一个debugger，就可以开始调试了。

实现挂载的真正函数是$mount方法，也就是说是在这个环节进行的数据转换为真实dom。

接下来具体说一下当你import Vue from 'vue’时发生的一些具体的事情。

• 首先当你引入vue时，就会触发vue.esm.js执行，首先会执行以下几个函数：

 initMixin(Vue);
stateMixin(Vue);
eventsMixin(Vue);
lifecycleMixin(Vue);
renderMixin(Vue);
initGlobalAPI(Vue);

这几个函数中initMixin()函数会给Vue的原型上添加一个_init()函数，然后当你new Vue(),也就是当你实例化这个函数的时候会立即执行this._init()函数。又因为他已经被初始化过了，所以调用是没有问题的。
其中_init()函数中比较重要的一个环节是执行了this.initState()这里就是对我们定义的方法和变量进行初始化，并挂载到vm上，也就是我们的vue实例上。这也就是为什么我们可以通过this可以直接调用自己定义过的变量和方法的原因。这里有两个比较重要的函数：proxy() 和 observe()， proxy的作用是做一层代码、映射。如果你访问的是data中的数据，他会代理到this._data中，也就是说如果你访问了this.slw其实访问的是this._data.slw。observe是专门做响应式处理的，也是一个重点。那么在this.initState()的最后环节会执行$mount函数进行挂载。而且在initState中的初始化函数可以看出:

initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');

这里已经已经触发了两个生命周期。beforeCreate 和 created