File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 55![ 响应式关键词.png] ( https://images.pingan8787.com/Vue/Reactive/what-reactive.png )
66从字面意思可以看出,具有“响应式”特征的事物会根据条件变化,使得目标自动作出对应变化。比如在“响应式布局”中,页面根据不同设备尺寸自动显示不同样式。
77
8- Vue.js 中的响应式也是一样,当数据发生变化后,使用到该数据的视图耶会相应进行自动更新 。
8+ Vue.js 中的响应式也是一样,当数据发生变化后,使用到该数据的视图也会相应进行自动更新 。
99
10- 接下来根据我个人理解,和我们一起探索下 Vue.js 中的响应式原理,如有错误,欢迎指点😺~~
10+ 接下来我根据个人理解,和大家一起探索下 Vue.js 中的响应式原理,如有错误,欢迎指点😺~~
1111
1212## 一、Vue.js 响应式的使用
1313
@@ -578,7 +578,7 @@ class Watcher {
578578 this .cb = cb; // cb:表示数据发生改变之后的回调
579579
580580 Dep .target = this ; // 全局唯一
581- this .oldValue = this .vm .$data [key]; // 保存变化的数据作为旧值,后续做判断是否更新
581+ this .oldValue = this .vm .$data [key]; // 保存变化的数据作为旧值,后续作判断是否更新
582582 Dep .target = null ;
583583 }
584584
@@ -596,7 +596,7 @@ class Watcher {
596596相比较第四节实现的 ` Watcher ` 类,这里做了调整:
597597
598598- 在构造函数中,增加 ` Dep.target ` 值操作;
599- - 在构造函数中,增加 ` oldValue ` 变量,保存变化的数据作为旧值,后续做为判断是否更新的依据 ;
599+ - 在构造函数中,增加 ` oldValue ` 变量,保存变化的数据作为旧值,后续作为判断是否更新的依据 ;
600600- 在 ` update() ` 方法中,增加当前操作对象 ` key ` 对应值的新旧值比较,如果不同,才执行回调。
601601
602602` Dep.target ` 是** 当前全局唯一的订阅者** ,因为同一时间只允许一个订阅者被处理。` target ` 指** 当前正在处理的目标订阅者** ,当前订阅者处理完就赋值为 ` null ` 。这里 ` Dep.target ` 会在 ` defineReactive() ` 的 getter 中使用到。
You can’t perform that action at this time.
0 commit comments