vue中this.init用法_vue1.0 中_initData 数据绑定一步一步学习

vue怎么实现的双向绑定？刚入坑的恐怕都能立马说出defineProperty这个东西，这是好事情，但如果对Object.defineProperty不熟的希望点右边链接再来看这篇文章。记得回来哦

话不多说直接上图 调用栈 stateMixin(vue)将_initState挂到vue的原型链上，当new Vue的_init会进行状态初始化。

_proxy 给vm实例添加get set方法可直接修改查找 vm实例上 example: vm.name 直接操作的是vm._data.name

上面的判断是告诉你只有当前这个组件没有props的时候 说白了他不是一个template模版组件就会干这件事

2.重头戏来了 observe 这才是老大哥。就在上图的最底下 虽然作者轻描淡写了observe data ==

3.observe 中一进来就判断了当前需要监听的是否是对象，不是就无需监听了，如果是那么判断对象上是否有__ob__属性,如果有直接返回__ob__的值(监听的对象上observe对象，可见4)，防止一个对象多次重复监听。

4.如果这个对象没有被创建监听那么就走Observe这个方法，哎这个方法应该很眼熟，是不是在第2步提过他，其实那是假大哥,但是那位假大哥的地位也是举足轻重的，每次创建对象的拦截监听都必须通过他的审核(见3)。

6.那么Observe做了啥，首先他接收整个data，创建两个构造函数属性value和dep，然后有个def在需要的监听对象上(value)添加了值为当前this到了__ob__不可枚举属性上，就是说这个对象从今天开始就是我的人了，我还给他盖了个__ob__章印。这一步其实也就改变了了构造属性上的value，并且也同时修改了vm上的_data,改变前后见图2和图三

图1

图2

图3

7.然后判断了这个对象是不是数组，如果是数组的话让每一项在去让observe假大哥去审核一遍，然后最终都会回到this.walk和convert这两位小弟上，这两位小哥就相当轻松了,把需要拦截的对象，key value拆分开分批次让他们的顶头上司defineReactive一对一处理

8.先看下这位顶头上司尊容

一看才发现原来所有活都在这，领导也不是白当的。这位领导人也非常聪明进来就判断了对象configurable这个属性(图中红色字2) 如果false(不可修改不可删除)，那么这位领导人觉得没必要监听对象上的这个属性，没人能动得了他，那还监听他的改变干哈，直接终止。反之，他就会帮这个属性创建拦截器啦。见下图最终的Observe的实例 (图4)以及vm上的_data(图5)

图4

图5

9接下来我在我的new Vue中写更加复杂的data(图6)最终的observe(图7)

图6

图7

发生了什么？多层嵌套的对象也有__ob__也有get、set拦截器，这时我们不妨仔细想想如果多层嵌套的对象只监听最外层的似乎是不合理的，内部改变外部监听不到，那么是怎么实现的呢，我们可以看下第8那个步骤，红色字3那段代码 `var childOb = observe(val)` 也就是说这位顶头上司把this.walk批次给到他的val在当作一个完整的需要监听的对象回到第三步骤中 进行新一轮的过滤，添加__ob__,添加拦截器,一直到这个val是一个不存在的东西或者不是一个对象，才会被终止。

至此data是怎么被内部初始化的，怎么添加额外属性以及拦截器的。那么时候会触发拦截器的get 必然是解析虚拟dom时发现有data的数据，set怎么触发相对应dom的更新呢，必然是解析虚拟dom时将dom绑定跟数据一一绑定，形成对应关系。