摘自《剖析Vue.js内部运行机制》
Vue.js
是一款MVVM
框架,数据模型仅仅是普通的JavaScript
对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是响应式系统
。尽管我们在使用Vue.js
进行开发时不会直接修改响应式系统
,但是理解它的实现有助于避开一些常见的坑,也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。
Object.defineProperty
首先我们来介绍一下 Object.defineProperty
,Vue.js
就是基于它实现响应式系统
的。
/*
obj: 目标对象
prop: 需要操作的目标对象的属性名
descriptor: 描述符
return value 传入对象
*/
Object.defineProperty(obj, prop, descriptor)
descriptor
的一些属性:
-
enumerable
:属性是否可枚举,默认false
。 -
configurable
:属性是否可以被修改或者删除,默认false
。 -
get
:获取属性的方法。 -
set
:设置属性的方法。
实现 observer (可观察的)
知道了Object.defineProperty
以后,我们来用它使对象变成可观察的。
首先我们定义一个cb
函数,这个函数用来模拟视图更新,调用它即代表更新视图,内部可以是一些更新视图的方法。
function cb (val) {
/* 渲染视图 */
console.log("视图更新啦~");
}
然后我们定义一个defineReactive
,这个方法通过 Object.defineProperty
来实现对对象的响应式
化,入参是一个obj
(需要绑定的对象)、key
(obj
的某一个属性),val
(具体的值)。经过 defineReactive
处理以后,我们的obj
的 key
属性在读
的时候会触发reactiveGetter
方法,而在该属性被写
的时候则会触发 reactiveSetter
方法。
function defineReactive (obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true, /* 属性可枚举 */
configurable: true, /* 属性可被修改或删除 */
get: function reactiveGetter () {
return val; /* 实际上会依赖收集,下一小节会讲 */
},
set: function reactiveSetter (newVal) {
if (newVal === val) return;
cb(newVal);
}
});
}
当然这是不够的,我们需要在上面再封装一层 observer
。这个函数传入一个value
(需要响应式
化的对象),通过遍历所有属性的方式对该对象的每一个属性都通过 defineReactive
处理。
function observer (value) {
if (!value || (typeof value !== 'object')) {
return;
}
Object.keys(value).forEach((key) => {
defineReactive(value, key, value[key]);
});
}
最后,让我们用observer
来封装一个Vue
吧!
在Vue
的构造函数中,对 options
的 data
进行处理,这里的 data
想必大家很熟悉,就是平时我们在写Vue
项目时组件中的data
属性(实际上是一个函数,这里当作一个对象来简单处理)。
class Vue {
/* Vue 构造类 */
constructor(options) {
this._data = options.data;
observer(this._data);
}
}
这样我们只要 new
一个Vue
对象,就会将 data
中的数据进行响应式
化。如果我们对data
的属性进行下面的操作,就会触发 cb
方法更新视图。
let o = new Vue({
data: {
test: "I am test."
}
});
o._data.test = "hello,world."; /* 视图更新啦~ */
至此,响应式原理已经介绍完了,接下来让我们学习响应式系统
的另一部分 ——依赖收集
。
响应式系统的依赖收集追踪原理
栗子一:
我们现在有这么一个 Vue
对象。
new Vue({
template:
`<div>
<span>{{text1}}</span>
<span>{{text2}}</span>
<div>`,
data: {
text1: 'text1',
text2: 'text2',
text3: 'text3'
}
});
然后我们做了这么一个操作。
this.text3 = 'modify text3';
我们修改了 data
中 text3
的数据,但是因为视图中并不需要用到 text3
,所以我们并不需要触发上一章所讲的cb
函数来更新视图,调用cb
显然是不正确的。
栗子二:
let globalObj = {
text1: 'text1'
};
let o1 = new Vue({
template:
`<div>
<span>{{text1}}</span>
<div>`,
data: globalObj
});
let o2 = new Vue({
template:
`<div>
<span>{{text1}}</span>
<div>`,
data: globalObj
});
这个时候,我们执行了如下操作。
globalObj.text1 = 'hello,text1';
我们应该需要通知o1
以及o2
两个 vm
实例进行视图的更新,依赖收集
会让text1
这个数据知道:“有两个地方依赖我的数据,我变化的时候需要通知它们”。
接下来我们来介绍一下依赖收集
是如何实现的。
订阅者 Dep
首先我们来实现一个订阅者Dep
,它的主要作用是用来存放Watcher
观察者对象。
class Dep {
constructor () {
/* 用来存放 Watcher 对象的数组 */
this.subs = [];
}
/* 在 subs 中添加一个 Watcher 对象 */
addSub (sub) {
this.subs.push(sub);
}
/* 通知所有 Watcher 对象更新视图 */
notify () {
this.subs.forEach((sub) => {
sub.update();
})
}
}
为了便于理解我们只实现了添加的部分代码,主要是两件事情:
- 用
addSub
方法可以在目前的Dep
对象中增加一个Watcher
的订阅操作; - 用
notify
方法通知目前Dep
对象的subs
中的所有Watcher
对象触发更新操作。
观察者 Watcher
class Watcher {
constructor () {
/* 在 new 一个 Watcher 对象时将该对象赋值给 Dep.target,在 get 中会用到 */
Dep.target = this;
}
/* 更新视图的方法 */
update () {
console.log("视图更新啦~");
}
}
Dep.target = null;
依赖收集
接下来我们修改一下defineReactive
以及Vue
的构造函数,来完成依赖收集。
我们在闭包中增加了一个Dep
类的对象,用来收集 Watcher
对象。在对象被读
的时候,会触发reactiveGetter
函数把当前的 Watcher
对象(存放在Dep.target
中)收集到Dep
类中去。之后如果当该对象被写
的时候,则会触发 reactiveSetter
方法,通知 Dep
类调用 notify
来触发所有Watcher
对象的 update
方法更新对应视图。
function defineReactive (obj, key, val) {
/* 一个 Dep 类对象 */
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
/* 将 Dep.target(即当前的 Watcher 对象存入 dep 的 subs 中) */
dep.addSub(Dep.target);
return val;
},
set: function reactiveSetter (newVal) {
if (newVal === val) return;
/* 在 set 的时候触发 dep 的 notify 来通知所有的 Watcher 对象更新视图 */
dep.notify();
}
});
}
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data);
/* 新建一个 Watcher 观察者对象,这时候 Dep.target 会指向这个 Watcher 对象 */
new Watcher();
/* 在这里模拟 render 的过程,为了触发 test 属性的 get 函数 */
console.log('render~', this._data.test);
}
}
总结
首先在 observer
的过程中会注册get
方法,该方法用来进行依赖收集
。在它的闭包中会有一个Dep
对象,这个对象用来存放Watcher
对象的实例。其实依赖收集
的过程就是把Watcher
实例存放到对应的 Dep
对象中去。
get
方法可以让当前的Watcher
对象(Dep.target
)存放到它的subs
中(addSub
)方法,在数据变化时,set
会调用Dep
对象的 notify
方法通知它内部所有的Watcher
对象进行视图更新。这是Object.defineProperty
的 set/get
方法处理的事情,那么依赖收集
的前提条件还有两个:
- 触发
get
方法; - 新建一个
Watcher
对象。
这个我们在
Vue
的构造类中处理。新建一个Watcher
对象只需要new
出来,这时候Dep.target
已经指向了这个new
出来的Watcher
对象来。
而触发 get
方法也很简单,实际上只要把 render function
进行渲染,那么其中的依赖的对象都会被读取
,这里我们通过打印来模拟这个过程,读取 test
来触发get
进行依赖收集
。
网友评论