Vue 响应式原理 源码

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

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

1.initState():

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

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

举个例子:

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

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

发布了321 篇原创文章 · 获赞 48 · 访问量 19万+

猜你喜欢

转载自blog.csdn.net/ferrysoul/article/details/104473479