响应化是MVVM模式中的一个重要组成部分,对数据的操作有了响应才有下一步根据响应做对应操作的机会
对象属性响应化处理
代码语言：javascript复制// 对象属性响应化处理
function reactiveObject(obj, key, val) {
// 对象的值也是对象的情况进行递归操作
observe(val);
Object.defineProperty(obj, key, {
get() {
console.log("get 属性: ", key, " 值: ", val);
return val;
},
set(newVal) {
if (newVal !== val) {
// 直接赋值对象的情况需要重新响应化处理
observe(newVal);
console.log("set 属性: ", key, " 值: ", newVal);
newVal = val;
}
},
});
}数组响应化处理
代码语言：javascript复制// 数组响应化处理
function reactiveArray() {
// 获取原始数组原型
const orgArrayProto = Array.prototype;
// 备份数组原型并重写方法
const reactiveArrayProto = Object.create(orgArrayProto);
["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach(
(method) => {
reactiveArrayProto[method] = function() {
// 执行数组原始方法
orgArrayProto[method].apply(this, arguments);
// 触发变更通知
console.log("数组操作: method: ", method, " arguments: ", arguments);
};
}
);
return reactiveArrayProto;
}执行统一响应化处理
代码语言：javascript复制// 执行统一响应化处理
function observe(obj) {
if (typeof obj !== "object" || obj == null) {
return;
}
if (Array.isArray(obj)) {
//执行数组响应化
//覆盖array原型
obj.__proto__ = reactiveArray();
for (let i = 0; i < obj.length; i ) {
observe(obj[i]);
}
} else {
//执行对象响应化(循环遍历将每个属性都进行响应化)
Object.keys(obj).forEach((key) => reactiveObject(obj, key, obj[key]));
}
}TEST
代码语言：javascript复制const person = {
name: "小明",
age: 18,
email: ["111@qq.com"],
address: { city: "bj" },
};
observe(person);
//1. 直接操作对象属性情况
//2. 操作对象嵌套对象情况
//3. 直接赋值对象给属性并读取的情况
//4. 数组7中操作情况
