1.使用Object.defineProperty方式
准备数据：
let person = {
name: "hu",
age: 15,
hire: {
color: "yellow",
},
children: [
{
name: "张三",
age: 1,
},
{
name: "李四",
age: 5,
},
],
};
将对象响应化
function isObject(obj) {
let result =
Object.prototype.toString.call(obj).indexOf("Array") != -1 ||
Object.prototype.toString.call(obj).indexOf("Object") != -1
? true
: false;
return result;
}
//将object对象响应化
function ObserveObject(obj) {
if (!isObject(obj)) return new Error("被监听的不是一个对象");
for (let key in obj) {
if (!isObject(obj[key])) {
defineReactive(obj, key, obj[key]);
} else {
//监听
key = ObserveObject(obj[key]);
}
}
}
//执行ObserveObject方法，将对象响应化处理
ObserveObject(person);
监听数组方法
let ArrayProto = Array.prototype;
let arrayMethod = Object.create(ArrayProto);
let originMethod = [];
["push"].forEach((method) => {
let original = arrayMethod[method];
originMethod[method] = function mutator() {
console.log("监听到数组的变化啦！");
return original.apply(this, arguments);
};
});
劫持obj对象的属性
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`set ${key}:${newVal}`);
val = newVal;
update();
}
},
});
}
对象被劫持时调用更新操作方法
function update() {
console.log("我被更新了");
}
测试数据
person.name = "piao";
let children = person.children;
children.__proto__ = originMethod;
children.push({ name: "王五", age: 1 });
console.log(person.name, person.hire.color);
console.log(person.children);
2.使用Reflect代理
let handler = {
get(target, key, receiver) {
// console.log("get", target, key);
//懒监听，去获取的时候才监听对象里面的对象，而不是直接递归循环监听
if (typeof target[key] === "object" && target[key] !== null) {
return new Proxy(target[key], handler);
}
return Reflect.get(target, key, receiver);
},
set(target, key, value) {
// console.log("set", target, key, value);
//数组新增会执行两次，一次是修改length，一次是添加值
let oldValue = target[key];
if (!oldValue) {
//找不到老值，新增
} else if (oldValue !== value) {
//老值和新值不相等，修改
}
update();
//为什么使用proxy就要用reflect?防止报错
return Reflect.set(target, key, value);
},
};
function update() {
//在此可以
// console.log("我被更新了");
}
//消息
let proxyPerson = new Proxy(person, handler);
proxyPerson.name = "piao";
let children = proxyPerson.children;
children.push({ name: "王五", age: 1 });
console.log("page", proxyPerson.page);
总结：
Object.defineProperty时vue3之前使用数据监听的方法，在set时进行对象劫持，劫持到更新之后调用update方法进行通知更新。监听数组更新的方法：重写数组方法，将原型上的方法重写。
Reflect是vue3使用的数据监听的方法。
- 反射的对象-将对象上原有的方法挂到reflect上，方便使用。
- 反射的方法-使用目标对象上的方法和之前的方法一样
