Vue 响应式原理 源码

整个函数结束，相当于初始化所有属性和Vue内置事件（如 $emit），并且使所有属性变为响应式。

初始化所有Option API ，对其中的用户自定义数据data(){}进行 observe()：此函数用来新建一个类Observer的实例，类Observer的constructor中用walk()函数进行遍历每个属性，walk()函数中调用defineReactive（）函数进行Object.defineProperty(obj,key,{})双向数据绑定。

1.initState（）：

 

算了算了，直接上图，做了一个源码内部的流程图。打字太麻烦了。

 

 

个人建议去深入阅读一下这个部分，这个部分他做了一些优化，感觉很棒。

举个例子：

如果我渲染一万条数据，我只是单纯的渲染，我不会对他进行操作。那其实没必要进行响应式，2.0递归遍历会很消耗性能。

我直接用freeze进行冻结。Vue底层自动进行了监听，如果一个对象是不可以扩展的，她就会直接返回，不进行响应式。在observe（）阶段。