vue2.0响应式原理,vue.js响应式原理
本文主要介绍了vue组件通信的几种方法，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
1、响应式原理基础2、核心对象：Dep和Watcher3、集合依赖和更新依赖3.1集合依赖3.2更新依赖4、源代码调试4.1测试1的页面代码、对象描述2、Dep和Watcher的关系3、最终关系结果4.2源代码调试1、集合依赖的入口函数：initState(页面初始化时执行)；2.初始化计算和观察器时，生成观察器实例化对象的摘要。
1、响应式原理基础
响应的基本原理是基于对象。定义属性(对象、属性、描述符)。在描述符中，可以定义get和set方法，获取属性值时可以触发get方法(可以收集依赖关系)，设置属性值时可以触发set方法(依赖关系更新)。
扩展：以上是vue2.0的响应式基本原理，vue3.0的基本原理是Proxy，可以监控属性的get和set方法，属性的添加和删除等。它比Object.defineProperty更强大，但与IE11不兼容。
2、核心对象：Dep与Watcher
Dep:Vue在数据中声明的每一个属性都会生成一个dep的实例对象，Dep.subs存储该属性发生变化时需要更新的Watcher
Watcher:生成Watcher的实例对象有三种情况，即：
1.计算中定义的计算属性；
2.手表中编写的监控功能；
3.渲染观察者；的组件；
3、收集依赖与更新依赖
3.1 收集依赖
将Watcher的实例对象W分配给它所依赖的属性的Dep。流程如下：
1.set dep . target=Watcer的当前实例对象w；
2.w执行定义的函数(即computed/watch中编写的函数)；
3.如果在执行函数的过程中使用了数据中定义的属性，将会触发该属性的get方法。在get方法中，dep实例对象Dep会将Dep.target中存储的W放入dep.subs数组中，并完成依赖集合。
解释：Dep.target是当前Watcer的实例对象。
3.2 更新依赖
当我们修改一个我们声明的属性时，会触发该属性的set方法，set方法会更新dep.subs数组中收集的watcher实例对象，也就是触发我们在computed和Watch中定义的函数。
4、源码调试
4.1 测试的页面代码
模板
差异
diva:输入v-model=a //div
divc:{{ c }}/div
divb:输入垂直模型=b //div
/div
/模板
脚本
导出默认值{
数据：()={
返回{
答： ，
b:“”
}
},
计算值：{
c() {
返回“来源于”this.a
}
},
观察：{
b() {
console . log(“b已更改”)；
}
}
};
/脚本
上面的代码vue在初始化后会生成以下对象：
1、对象说明
属性A和B对应的Dep实例对象(由于A和B的变化需要更新的收集观察器):depa和depB
页面渲染函数生成相应的Watcher实例对象updateWatcher；
Computed property C生成对应的Watcher实例对象：watcherC
monitor属性b生成对应的watch实例对象：Watcherb
2、Dep与Watcher的关系
a和b改变的页面需要重新渲染，所以updateWatcher存在于depA和depB的subs中；
计算属性C根据属性A的变化而更新，所以watcherC存在于depA的subs中；
B的变化会触发watch中定义B的监控函数，所以watcherB存在于depB的subs中；
3、最终的关系结果
final属性A=[updatewatcher，watcherc]收集的依赖depa.subs
final属性b=[updatewatcher，watcherb]收集的依赖depb.subs
4.2 源码调试
找到源文件：node _ modules \ vue \ dist \ vue . runtime . ESM . js；
主要涉及以下功能：
1、收集依赖的入口函数：initState（页面初始化时执行);
初始化顺序是data data - computed - watch first:原因是computed依赖于data，watch依赖于data和watch，依赖的需要先初始化。
2、初始化computed和watch时，生成Watcher实例化对象
首先执行Watcher.get函数，实例化Dep.target=current Watcher对象。
触发集合依赖项
执行计算属性中的函数。如果访问数据中的某个属性，会触发数据属性的get方法，触发依赖关系收集：
修改该属性时，将触发set方法，并将更新dep.subs中的watcher对象。
最后，触发观察器的更新函数，将需要更新的观察器放入队列中：
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。