知识点铺垫
var obj = {};
//getter和setter需要变量中转才能使用，所以不合适
var temp;
Object.defineProperty(obj, 'a', {
//getter
get() {
return temp;
},
//setter
set(val) {
temp = val;
}
// value: 3,//value和get不能同时存在
// writable:true,
// enumerable:true
});
Object.defineProperty(obj, 'b', {
value: 5,
//是否可被枚举
// enumerable:false
});
// obj.a++;
// for (var item in obj) {
// console.log(item);//只输出a
// }
obj.a = 10;
console.log(obj);
- 闭包形式演化
避免单独的temp变量
var obj = {};
//通过闭包，避免单独变量temp
function defindReactive(data, key, val) {
Object.defineProperty(data, key, {
enumerable:true,
configurable:true,//可配置，比如能被外部delete
get() {
return val;
},
set(newval) {
if (newval === val) {
return;
}
val = newval;
}
});
}
defindReactive(obj,'a',10);
obj.a++;
console.log(obj);
殊理
实际上整体殊理逻辑要分门别类：例如，arr和object分开讨论；
同时整体看起来好像是单向，但看对象的话实际上observe->Observer-> defineReactive，如果有set操作则又进入observe其中如果defineReactive如果知道对象有子对象，会继续从observe开始循环；即每次都是处理一层而已
至于Dep(依赖收集)和Watcher是收集依赖和触发更新的,殊理逻辑可以最后再看
1.png
什么是依赖
- 需要用的数据的地方，称为依赖
- Vue2.x，中等依赖，用到数据的组件是依赖
- 在getter中收集依赖，在setter中触发依赖
Dep类和Watcher类
- 依赖就是Watcher,只有在Watcher触发getter才会收集依赖，哪个Watcher触发了getter，就把哪个Watcher收集到Dep中
- Dep使用发布订阅模式，当数据发生变化时候，会循环依赖列表，把所有Watcher都通知一遍
- 代码实现的巧妙之处：Watcher把自己设置到全局的一个指定位置，然后读取数据，因为读取了数据，所以会触发这个数据的getter。在getter中就能得到当前正在读取数据的Watcher，并把这个Watcher收集到Dep中。
4.png
代码
- index.js
import { observe } from './observe.js'
import Watcher from './Watcher.js'
var obj = {
a: {
m: {
n: 5
}
},
b: 10,
g:[2,3,4]
};
observe(obj);
// obj.b++;
obj.g.push(5);
console.log(obj);
new Watcher(obj,'a.m.n',val=>{
console.log(1111,val);
})
- observe.js
import Observer from './Observer.js'
//创建observer函数，起辅助判别的作用:看obj身上有没有__ob__
export const observe = function (value) {
//如果value不是对象，什么也不做；因为直接数值时候没有必要
if (typeof value !== 'object') {
return
}
var ob;
if (typeof value.__ob__ !== 'undefined') {
ob = value.__ob__;//不希望和常见属性重名
} else {
ob = new Observer(value);
}
return ob;
}
- Observer.js
import { def } from './utils.js';
import defineReactive from './defineReactive.js'
import { arrayMethods } from './arr.js'
import { observe } from './observe.js'
import Dep from './Dep.js'
//Observer 将一个正常的object转换为每个层级的属性都是响应式(可以被侦测)的object
export default class Observer {
constructor(value) {
//每个Observer的实例，成员中都有一个Dep的实例
this.dep = new Dep();
def(value, '__ob__', this, false);
//检查它是数组还是对象
if (Array.isArray(value)) {
//如果是数组，将这个数组的原型，指向arrayMethods
Object.setPrototypeOf(value, arrayMethods);
//让这个数组变得observe
this.observeArray(value);
} else {
this.walk(value);
}
}
//遍历
walk(value) {
for (let key in value) {
defineReactive(value, key);
}
}
//数组特殊遍历
observeArray(arr) {
for (let i = 0; i < arr.length; i++) {
observe(arr[i]);
}
}
};
- defineReactive.js
import { observe } from './observe.js'
import Dep from './Dep.js'
export default function defindReactive(data, key, val) {
//此处dep是闭包中的
const dep = new Dep();
if (arguments.length == 2) {
val = data[key];
}
//子元素要进行observe，至此形成了递归；这个递归不是函数调用自己，是多个函数形成循环调用
let childOb = observe(val);
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get() {
//如果现在处于依赖收集阶段
if (Dep.target) {
dep.depend();
if (childOb) {
childOb.dep.depend();
}
}
return val;
},
set(newval) {
if (newval === val) {
return;
}
val = newval;
//当设置了新值，新值也要被observe，不然不是响应式的
childOb = observe(newval);
//发布订阅模式，通知dep
dep.notify();
}
});
}
- arr.js
import { def } from './utils.js';
const arrayPrototype = Array.prototype;
//以Array.prototype为原型，创建arrayMethods对象
// 针对数组形成响应式，需要改写数组的七种方法
// push
// pop
// shift
// unshift
// splice
// sort
// reverse
export const arrayMethods = Object.create(arrayPrototype);
// Object.setPrototypeOf(o,arrayMethods);
// o.__proto__=arrayMethods;
const methodsNeedChange = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'];
methodsNeedChange.forEach(methodName => {
//备份原来的方法
const original = arrayPrototype[methodName];
//定义新的方法
def(arrayMethods, methodName, function () {
//把类数组对象变为数组,不然下面的slice无法调用
const args=[...arguments];
//把这个数组身上的__ob__取出来，__ob__已经被添加了，为什么已经被添加了？因为数组肯定不是最高层
//比如obj.g属性是数组，obj不能是数组，第一次遍历obj这个对象的第一层的时候，已经给g属性，添加了__ob__属性
const ob = this.__ob__;
// 'push',
// 'unshift',
// 'splice',
//这三者涉及插入新项，所以也需要变成observe
let inserted = [];
switch (methodName) {
case 'push':
case 'unshift':
inserted = args;
break;
case 'splice':
inserted = args.slice(2);
break;
}
//判断有没有需要插入新项,让新项变成响应的
if (inserted) {
ob.observeArray(inserted);
}
//此处this是被数组打点调用的，而且不能用箭头函数
original.apply(this, arguments);
ob.dep.notify();
}, false);
})
- Dep.js
var uid = 0;
export default class Dep {
constructor() {
this.id = uid++;
//用数组存储自己的订阅者.放的是watcher的实例
this.subs = [];
}
addSub(sub) {
this.subs.push(sub);
}
//添加依赖
depend() {
//Dep.target：就是自己指定的全局的位置而已，只要是全局唯一即可
if (Dep.target) {
this.addSub(Dep.target);
}
}
notify() {
const subs = this.subs.slice();//浅克隆一份
for (let i = 0; i < subs.length; i++) {
subs[i].update();
}
}
}
- Watcher.js
import Dep from "./Dep";
var uid = 0;
export default class Watcher {
constructor(target, expression, callback) {
this.id = uid++;
this.target = target;
this.gettr = parsePath(expression);//'a.b.c.d'
this.callback = callback;
this.value = this.get();
}
update() {
this.getAndInvoke(this.callback);
}
get() {
//进入依赖收集阶段，让全局的Dep,target设置为watcher本身，那么就是进入依赖收集阶段
Dep.target = this;
const obj = this.target;
var value;
try {
value = this.gettr(obj);
} finally {
//收集完毕，退出，其他watcher需要
Dep.target = null;
}
return value;
}
//获取数据并更新
getAndInvoke(cb) {
const value = this.get();
if (value !== this.value || typeof value == 'object') {
const oldValue = this.value;
this.value = value;
cb.call(this.target, value, oldValue);
}
}
};
function parsePath(str) {
//作用是：把'a.b.c.d'这种转换成a{b:{c:{d:{}}}}
var segments = str.split('.');
return (obj) => {
for (let i = 0; i < segments.length; i++) {
if (!obj) {
return;
}
obj = obj[segments[i]];
}
return obj;
}
}
