1
理解：
-
创建视图的函数（render）和数据之间的关联；
-
当数据发生变化的时候，希望render重新执行；
-
监听数据的读取和修改；
- defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性更好；（要求监听数据是对象）
- proxy：监听范围更广；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）
如何知晓数据对应的函数；
function track(target, key) {
console.log(`依赖收集：${key}`, 'color: #f00');
}
function trigger(target, key) {
console.log(`派发更新：${key}`, 'color: #f00');
}
function isObject(value) {
return typeof value === 'object' && value !== null;
}
const handlers = {
get(target, key) {
// 依赖收集
track(target, key);
return target[key]; // 返回对象的相应属性值
},
set(target, key, value) {
// 派发更新
trigger(target, key);
// target[key] = value; // 设置对象的相应属性值
// return true;
// 赋值成功返回true，赋值失败返回false；这里可以使用try catch
return Reflect.set(target, key, value)
// 也可以使用Reflect.set(target, key, value)。它会直接返回true或者false
},
}
// 同一个对象，调用两次reactive，会生成不一样的Proxy对象，没有意义
const targetMap = new WeakMap();
function reactive(target) {
if (!isObject(target)) {
return target; // 如果不是对象，直接返回
}
if (targetMap.has(target)) {
return targetMap.get(target);// 如果已经代理过了，直接返回；
}
const proxy = new Proxy(target, handlers);
targetMap.set(target, proxy);
return proxy;
}
const state = reactive({
a: 1,
b: 2,
});
// fn函数中用到了state数据
function fn() {
state.a;
state.b;
}
fn();
state.a++; // 先读取，再赋值
依赖收集：a color: #f00
依赖收集：b color: #f00
依赖收集：a color: #f00
派发更新：a color: #f00
const obj = {
a: 1,
b: 2,
get c() {
return this.a + this.b;
}
};
const state = reactive(obj);
state.c;
这样写的话，依赖收集只能收集到属性c；因为this指向obj；
可以这样操作：
get(target, key, receiver) {
// 依赖收集
track(target, key);
// receiver指的是代理对象
return Reflect.get(target, key, receiver) ;
// 改变this指向，将this指向为代理对象
// return target[key]; // 返回对象的相应属性值
},
下面的用法，只能收集到c，收集不到c1
const obj = {
a: 1,
b: 2,
c: {
c1: 1,
},
};
const state = reactive(obj);
state.c.c1;
可以这样操作
如果访问的属性值还是一个对象，对属性值再次进行代理；
const obj = {
includes: () => {},
indexOf: () => {},
};
const handlers = {
get(target, key, receiver) {
// 依赖收集
track(target, key);
// 对于数组来说，无法在代理对象中找到时，去原始数组中重新找一次
// const obj = {};
// const arr = [1, obj, 3];
// const state = reactive(arr);
// state.includes(obj);
if ((obj.hasOwnProperty(key) && Array.isArray(target)) {
return obj[key];
}
// receiver指的是代理对象
const result = Reflect.get(target, key, receiver) ;
if (isObject(result)) {
return reactive(result);
}
},
}
简易的模型已经写好；
2 读信息 进行依赖升级
Object.keys和let i in obj用的都是ownKeys；
‘a’ in obj; 用的是has;
obj.a 用的是get;
这里的读不光是通过state.a来读取a属性
还可能通过’e’ in state；来查看’e’属性在不在state中；
const obj = {};
const state = reactive(obj);
'e' in state;
解决办法：新增has方法
const TrackOpTypes = {
GET: 'get', // 读取属性值
HAS: 'has', // 判断属性是否存在
ITERATE: 'iterate', // 迭代对象
};
function track(target, trackOpType, key) {
console.log(`依赖收集：${key}，收集方法：${trackOpType}`, 'color: #f00');
}
const handlers = {
get(target, key, receiver) {
// 依赖收集
track(target, TrackOpTypes.GET, key);
// ...
},
set(target, key, value, receiver) {},
has(target, key) {
track(target, TrackOpTypes.HAS, key);
return Reflect.has(target, key); // 判断对象是否有key属性
}
}
同理
const TriggerOpTypes = {
SET: 'set', // 设置属性值
ADD: 'add', // 添加属性值
DELETE: 'delete', // 删除属性
}
function trigger(target, triggerOpType, key) {
console.log(`派发更新：${key}, 更改方法：${triggerOpType}`, 'color: #f00');
}
还有一种情况
const handlers = {
get,
set,
has,
ownKeys(target) {
track(target, TrackOpTypes.ITERATE);
return Reflect.ownKeys(target); // 返回对象的所有属性名
},
}
function track(target, trackOpType, key) {
if (trackOpType === TrackOpTypes.ITERATE) {
console.log(`依赖收集方法：${trackOpType}`, 'color: #f00');
return;
}
console.log(`依赖收集：${key}，收集方法：${trackOpType}`, 'color: #f00');
}
const obj = { a: '1'};
const obj2 = {}
const state = reactive(obj);
const state2 = reactive(obj2);
for (let i in state) {}
Object.keys(state2);
Object.keys和let i in obj用的都是ownKeys；
依赖收集方法：iterate color: #f00
依赖收集方法：iterate color: #f00
3 新增属性
set(target, key, value, receiver) {
// 派发更新
const type = target.hasOwnProperty(key)
? TriggerOpTypes.SET
: TriggerOpTypes.ADD;
trigger(target, type, key);
return Reflect.set(target, key, value, receiver);
},
4 删除属性
deleteProperty(target, key) {
trigger(target, TriggerOpTypes.DELETE, key);
return Reflect.deleteProperty(target, key); // 删除对象的相应属性
}
delete state.a;
