核心原理
Vue通过 Object.defineProperty 的 getter/setter 对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据。
- 监听器
Observer
,用来劫持并监听所有属性,如果属性发生变化,就通知订阅者; - 订阅器
Dep
,用来收集订阅者,对监听器Observer
和 订阅者Watcher
进行统一管理; - 订阅者
Watcher
,可以收到属性的变化通知并执行相应的方法,从而更新视图;
Object.defineProperty
**Object.defineProperty()**
方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(obj, prop, descriptor)
-
obj
要定义属性的对象。
-
prop
要定义或修改的属性的名称或
Symbol
。 -
descriptor
要定义或修改的属性描述符。
// 响应式函数
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`访问了${
key}属性`)
return val
},
set(newValue) {
console.log(`将${
key}由->${
val}->设置成->${
newValue}`)
if (val == newValue) {
return;
}
val = newValue
}
})
}
const data = {
name: 'Tom',
age: 3
}
const observe = function(data) {
for (let key in data) {
defineReactive(data, key, data[key])
};
}
observe(data);
console.log(data.name)
// 访问了name属性
// Tom
data.name = 'Jerry'