响应式依赖收集原理
在Vue原理学习 (二)中,介绍Object.defineProperty
中的[[Getter]]
时,提到了Vue会在这里产生依赖收集,那么,什么是依赖收集呢?
在我一开始读到依赖收集这个词的时候,有点懵逼,这里我把自己的理解告诉大家:所谓的依赖收集,就是把所有用到(依赖)的数据给收集起来(放到一个数组中),方便后面数据发生变化的时候,可以通知这些收集起来的对象。
建议大家可以先去了解JS的发布订阅模式。
我们来看下面这个例子🌰:
<p>{{tetx1}}</p>
<p>{{tetx2}}</p>
let vue = new Vue({
data: {
text1: '特朗普谈“特金会”:不会对朝鲜进行政权更迭',
text2: '韩朝边境地产疯狂:严禁开发地块也在大量交易',
text3: '“五险一金”迎来4个大变化 对你有啥影响?'
}
})
这里,我们new了一个Vue实例,其中data
中有三个文本数据,但是只使用了text1
和text2
。
此时,我们作如下操作,修改text3
的数据:
this.text3 = '不来梅9-3狂胜弱旅 张玉宁首发上演帽子戏法'
熟悉Vue的同学都知道,我们修改了数据,同时对应的,视图也会发生变化。并且在Vue原理学习 (二)中,我们也介绍了Vue更新视图的简单实现,也就是调用cb
函数。
但是,目前我们在这里并没有使用到text3
,所以我们只需要更新数据,而不需要更新视图,也就是不需要调用cb
函数,因为这样可以提高性能。
另外,我们再来看另外一个例子🌰:
// 定义一个全局变量
let globalObj= {
text1: 'i am global text'
}
// vue1
let vue1 = new Vue({
template: ''<p>{{text1}}</p>,
data: globalObj
})
// vue2
let vue2 = new Vue({
template: ''<p>{{text1}}</p>,
data: globalObj
})
在这个例子中,我们定义了两个vue实例,并且其中的text1
数据都指向了globalObj
,当我们作出修改时:globalObj.text1 = 'hello world'
,对应的,vue1
和vue2
的视图也应该发生变化。
而依赖收集做的就是这里的工作,他会让text1这个数据知道,我有两个地方依赖(绑定)了我,我需要通知他们。
在这里,我们定义的
globalObj
是一个对象,大家可以去手动的尝试下,如果定义的直接是一个数字或字符串,当我们修改的该全局变量的时候,vue实例并不会发生变化。
对于这一现象,我理解的是:globalObj
是一个指针,指向实际的数据存储位置,而当我们将globalObj
赋给data
的时候,实际是将指针路径给了data,所以当我们修改globalObj.text1
的时候,globalObj
这个实际的对象会发生变化,同样的,因为data
也指向这个对象,也会发生变化。所以,当globalObj
不是一个对象,是数字或者字符串的时候(比如globalObj='old text'
),我们对globalObj='new text'
做这样的修改时,只不过是改变了globalObj
的指针指向,原来的old text
这个数据依旧存。当然,垃圾回收机制暂不讨论。
对于这一点,大家可以去深入了解JS的变量赋值底层的相关知识。
好,我们言归正传,继续回到Vue的依赖收集上。
依赖收集是如何实现的
这里我们可以简单的先理解JS中的发布订阅模式,依赖收集原理和发布订阅差不多。
我们来看下面的代码,其作用是用来存放Watcher
观察者对象。
class Dep {
constructor () {
this.subs =[]; // 用来存放Watcher对象
}
// 添加watcher对象方法
addSubs (sub) {
this.subs.push(sub)
}
// 通知视图更新方法
notify () {
this.subs.forEach(sub => {
sub.update();
})
}
}
上段代码是一个简单的发布订阅模式,也是一个简单的订阅者Dep。
同样的,我们还需要写一个Watcher观察者
class Watcher {
constructor() {
// 在new一个Watcher的时候,将this赋给Dep.target,在get中会用到
Dep.target = this
}
// 视图更新函数,即前面的`sub.update()`所调用的函数
update() {
console.log('视图更新啦😄')
}
}
Dep.target = null;
依赖收集
我们来修改Vue原理学习 (二)中的defineDispose
函数,来完成依赖收集。我们先来看代码。
function defineDispose(obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, val, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
// 将当前的Watcher对象存入subs中
dep.addSubs(Dep.target)
return val;
},
set: function reactiveSetter(newVal) {
if (newVal === val) return
dep.notify(); // 通知所有视图 数据发生了更新
}
})
}
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data); // 该函数可查看 Vue原理学习 (二) 文章
// 新建一个Watcher 对象,此时Dep.target会指向这个Watcher对象
new Watcher();
// 打印test数据,会触发Getter操作
console.log('render~', this._data.test);
}
}
这里,我们对defineDispose
稍微做了修改,在开始的地方,定一个一个dep
常量,也就是new 了一个Dep实例,并且在get
的时候,将Dep.target
添加到了subs
中,也就是所谓的依赖收集的收集操作。
然后在set
的时候,我们调用了notify
方法,通知所有收集的Watcher
进行视图更新或其他操作。
另外,我们也对Vue
构造类做了改变, 增加了new Watcher();
,之所以这么做,是因为我们new了一个Watcher对象后,前面get
的时候的Dep.target
就会指向这个Watcher
对象。 可以回头看下前面定义的Watcher
类和Dep
类。
总结
其实熟悉JS的发布订阅模式的话,会发现,这里的所谓依赖收集其实就是该模式实现的。
首先在observer
的过程中会注册get
方法,该方法中调用了dep.addSubs()
方法来将当前的Watcher
对象实例存放进去,然后在数据发生变化的时候,也就是set
的时候,会调用dep.notify()
方法,来通知他内部所有的Watcher
对象进行视图更新操作。
另外,依赖收集的前提条件有两个:
- 触发
get
方法 - 新建一个
Watcher
对象
我修改了原来的图片,再来看看,是不是清晰多了。