Vue响应式原理
Vue响应式系统基本原理
Object.defineProperty
Object.defineProperty(obj, prop, descriptor)
这是实现响应式的基础，通过对象属性描述对象来控制obj的prop
{
value: 'static'
writable: true,
enumerable: true
configurable: true
get: function(){}
set: function(){}
}
上面六个对象属性的描述属性，可以看作是控制属性的属性
实现Observer
首先定义一个更新函数来模拟视图更新
function updata (val) {
console.log("视图更新了哈～");
}
然后定义一个defineReact函数通过Object.defineProperty(obj, prop, descriptor)，来进行数据劫持，实现对象的响应化。
当一个对象的属性一旦定义了取值函数get（或存值函数set），就不能将writable属性设为true，或者同时定义value属性，否则会报错。
经过defineReact函数处理后，对象读取属性时会触发get，修改属性值时会触发set
function defineReact (obj, key, value) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactGetter () {
return value;
},
set: function reactSetter (newValue) {
if (newValue === value) return;
updata(newValue);
}
});
通过递归遍历将一个obj的属性都转化为由存取器控制，为方便理解去掉递归的过程
function observer (targetObj) {
if (!targetObj || (typeof targetObj !== 'object')) {
return;
}
Object.keys(targetObj).forEach((key) => {
defineReact(targetObj, key, targetObj[key]);
});
}
最后来看看在Vue中的实现
class Vue {
//Vue的构造函数
constructor(options) {
this._data = options.data;
observer(this._data);
}
}
我们在使用Vue生成实例的时候，就会将data中的数据实现Observe，响应化
const obj = new Vue({
data: {
text: 'hello'
}
})
总结，一旦触发setter函数，Vue将会自动判断是否要触发视图更新函数，来更新页面，实现响应式。
响应式系统的依赖收集
依赖收集会让 data中的某个数据知道有多少个地方依赖我的数据，在我变化的时候需要通知它们。
创建一个发布订阅模式GatherWatcher来接收依赖数据的更新，它的主要作用就是将在Vue实例中依赖data中某个数据的所有地方（watcher）收集起来，统一管理。
class GatherWatcher {
constructor () {
/* 用来存放Watcher对象的数组 */
this.subs = [];
}
/* 在subs中添加一个Watcher对象 */
addSub (sub) {
this.subs.push(sub);
}
/* 通知所有Watcher对象更新视图 */
notify () {
this.subs.forEach((sub) => {
sub.update();
})
}
}
接下来我们修改一下 defineReact 以及 Vue 的构造函数，来完成依赖收集。
function defineReactive (obj, key, val) {
//一个watchers对象，来收集对某个数据的的watcher
const watchers = new GatherWatcher();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactGetter () {
//在get的时候将当前的Watcher对象存入watchera的subs中
watchers.addSub(watcher);
return val;
},
set: function reactiveSetter (newVal) {
if (newVal === val) return;
// 在set的时候触发watchers的notify来通知所有的watcher对象更新视图
watchers.notify();
}
});
}
class Vue {
constructor(options) {
this._data = options.data;
observer(this._data);
/* 新建一个Watcher观察者对象，这时候wacther会指向这个Watcher对象 */
new Watcher();
console.log('render', this._data.test);//模拟render
}
}
总结一下
1. 通过`Object.defineProperty` 把这些属性全部转为 `getter/setter`，进行数据劫持
2. 在某个数据`getter`时，通过订阅，收集对这个数据的依赖者们（watcher）
3. 在数据setter时，发布更新`Notify`,通知这个数据的订阅者们进行更新，重新渲染。
