如何追踪变化
为什么对于Array的侦测方式和Object的不同？如下一句push操作，调用的是数组原型上的方法改变数组，不会触发getter/setter。
this.list.push(1);
在ES6之前，JavaScript并没有提供元编程的能力，足以拦截原型方法。Vue的做法是写自定义方法覆盖原型方法。
使用拦截器覆盖原生原型方法.png
用一个拦截器覆盖Array.prototype，每当我们调用原型方法操作数组时，调用的都是自定义方法，就可以跟踪到变化了。
拦截器
拦截器和Array.prototype一样也是一个对象，包含的属性也一样，只是一些能改变数组的方法是处理过的。
整理一下，发现数组原型可以改变数组自身内容的方法有七个：push、pop、shift、unshift、splice、sorte和reverse。
const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
[
'push',
'pop',
'shift',
'unshift',
'splice',
'sorte',
'reverse'
].forEach(function(method){
// 缓存原始方法
const original = arrayProto[method];
Object.defineProperty(arrayMethods, method, {
value: function mutator(...args){
return original.apply(this, args);
},
enumerable: false,
writeable: ture,
configurable: true
})
})
这样我们就可以在mutator函数中做一些事情了，比如发送变化的通知。
使用拦截器覆盖Array原型
export class Observer{
constructor(value){
this.value = value;
if(Array.isArray(value)){
value.__proto__ = arrayMethods;
} else {
this.walk(value);
}
}
}
__proto__其实是Object.getPrototypeOf和Object.setPrototypeOf的早期实现，只是ES6的浏览器支持度不理想。
使用__proto__覆盖原型.png
将拦截器方法挂载到数组属性上
并不是所有浏览器都支持通过__proto__访问原型，所以还要处理不能使用这个非标准属性的情况。
Vue的做法非常粗暴，直接将arrayMethods身上的方法设置到被侦测数组上。
const hasProto = '__proto__' in {};
const arrayKeys = Object.getOwnPropertyNames(arrayMethods);
export class Observer{
constructor(value){
this.value = value;
if(Array.isArray(value)){
const augment = hasProto ? protoAugment : copyAugment;
augment(value, arrayMethods, arrayKeys);
} else {
this.walk(value);
}
}
}
function protoAugment(target, src, keys){
target.__proto__ = src;
}
function copyAugment(target, src, keys){
for(let i = 0, l = keys.length;i < l;i++){
const key = keys[i];
def(target, key, src[key]);
}
}
如何收集依赖
我们创建拦截器实际上是为了获得一种能力，一种感知数组内容发生变化的能力。现在具备了这个能力，要通知谁呢？根据前面对Object的处理，通知Dep中的依赖（Watcher）。
怎么收集依赖呢？还用getter。
function defineReactive(data, key, val){
if(typeof val = 'object'){
new Observer(val);
}
let dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function(){
dep.depend();
// 这里收集依赖
return val;
},
set: function(newVal){
if(val === newVal){
return;
}
dep.notify();
val = newVal;
}
})
}
新增了一段注释，也就是说Array在getter中收集依赖，在拦截器触发依赖。
依赖收集在哪
export class Observer{
constructor(value){
this.value = value;
this.dep = new Dep(); // 新增dep
if(Array.isArray(value)){
const augment = hasProto ? protoAugment : copyAugment;
augment(value, arrayMethods, arrayKeys);
} else {
this.walk(value);
}
}
}
Vue将依赖列表存在了Observer，为什么是这里？
前面说Array在getter中收集依赖，在拦截器触发依赖，所以依赖的位置很关键，保证getter要访问的到，拦截器也访问的到。
收集依赖
Dep实例保存在Observer的属性上后，我们开始收集依赖。
function defineReactive(data, key, val){
let childOb = observe(val); // 修改
let dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function(){
dep.depend();
// 新增
if(childOb){
childOb.dep.depend();
}
return val;
},
set: function(newVal){
if(val === newVal){
return;
}
dep.notify();
val = newVal;
}
})
}
export function observe(value, asRootData){
if(!isObject(value)){
return;
}
let ob;
if(hasOwn(value, '__ob__')&&value.__ob__ instanceof Observer) {
ob = value.__ob__;
} else {
ob = observe(val);
}
return ob;
}
增加一个childOb 的意义到底是啥？在于搭建了从getter把依赖收集到Observer的dep中的桥梁。
在拦截器中获取Observer
因为拦截器是对数组原型的封装，所以拦截器可以访问到this（正在被操作的数组）。而dep在Observer中，所以需要在this上读到Observer实例。
// 工具函数
function def(obj, key, val, enumerable){
Object.defineProperty(obj, key, {
value: val,
enumerable: !!enumerable,
writeable: true,
configurable: true
})
}
export class Observer{
constructor(value){
this.value = value;
def(value, '__ob__', this); // 新增
if(Array.isArray(value)){
const augment = hasProto ? protoAugment : copyAugment;
augment(value, arrayMethods, arrayKeys);
} else {
this.walk(value);
}
}
}
现在Observer实例已经存入数组中__ob__属性，下一步就是在拦截器中获取。
const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
[
'push',
'pop',
'shift',
'unshift',
'splice',
'sorte',
'reverse'
].forEach(function(method){
const original = arrayProto[method];
Object.defineProperty(arrayMethods, method, {
value: function mutator(...args){
const ob = this.__ob__; // 新增
return original.apply(this, args);
},
enumerable: false,
writeable: ture,
configurable: true
})
})
向数组的依赖发通知
const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
[
'push',
'pop',
'shift',
'unshift',
'splice',
'sorte',
'reverse'
].forEach(function(method){
const original = arrayProto[method];
Object.defineProperty(arrayMethods, method, {
value: function mutator(...args){
const ob = this.__ob__;
ob.dep.notify(); // 向依赖发通知
return original.apply(this, args);
},
enumerable: false,
writeable: ture,
configurable: true
})
})
既然能获取到Observer实例和里面的依赖列表了，就直接调用notify。
剩下的内容就是获取数组元素变化，以及Vue的处理方式的弊端，另开一篇写吧。
网友评论