Skip to content

Commit 717ace0

Browse files
committed
feat: 2021.01.10
1 parent 85afcb2 commit 717ace0

1 file changed

Lines changed: 4 additions & 4 deletions

File tree

Cute-ReadingNotes/探索 Vue.js 响应式原理.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
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 中使用到。

0 commit comments

Comments
 (0)