2. vue源码分析——数据驱动

数据驱动是vue的一个核心思想 本篇我们的目标就是要搞懂我们写入的插值表达式是怎样渲染成dom的 这期间究竟发生了什么

1. new Vue发生了什么
在看之前 我希望你已经了解了vue的执行流程 不了解的朋友可以看我的上一篇博客
这里我们先从src/core/instance/inde.js文件开始

当我们new Vue时 首先vue做了警告处理 然后初始化了options 但是我们在这里并没有看到_init的定义 它其实是在initMixin方法里定义的 这里我们顺藤摸瓜进入./init


由于代码有点长 一屏截不下 所以这里截取了两次
我们可以看到_init方法做了各种初始化操作 这里我们先看merge操作 _init把new Vue时传进的options对象合并到了vm.$options上 在这个地方有个常见的问题 就是为什么我们通过this.xxx可以直接访问到我们传进去的data.xxx 而不需要this.data.xxx
这里我们找到initState方法 它定义在/.state里 我们进入./state

initState方法首先判断是否存在data 然后调用了initData方法

initData首先拿到data并赋值给vm._data 然后判断data是否是函数 如果是函数调用getData拿到返回值（也就是data）如果是对象 则直接赋值 如果没传则为空对象 拿到处理完成的data数据后 就是一些警告处理了 这里我们直接看最后 调用了proxy(vm, ‘_data’, key)方法

我们可以看到 proxy使用es5提供的Object.defineProperty做了一层代理 当我们访问vm.xxx时 它就会返回vm._data.xxx 这也就是为什么我们可以直接通过this.xxx访问到data的原因了

然后我们回到initMixin我们发现最后调用了vm.$mount方法 这里我可以提前透露一下 当我们一调用这个方法之后 所有的插值都会被替换 dom就完成了更新 这个方法是我们下面分析的重点
总结：new Vue发生了什么 首先调用原型上的_init方法 然后合并options到vm上 然后initState方法代理了vm 使我们可以直接通过this.xxx访问到data 最后调用了mount方法完成插值替换

今天先到这里 我明天继续更新