Vue2 响应式原理的实现方式
let teacher = {
name: "曹操",
age: 20,
};
const proxyTeacher = new Proxy(teacher, {
get(target, prop) {
//target是数据源,props是你访问的属性名
return target[prop];
},
set(target, prop, value) {
//给数据赋值
console.log("我会去给数据更新" + prop);
target[prop]=value
},
});
console.log(proxyTeacher.name);
console.log(proxyTeacher.age);
proxyTeacher.name='刘备'
proxyTeacher.age=24
teacher.age=100
console.log(teacher.age);
proxyTeacher.sex='女'
//proxy 无论是开始有的还是后来新增的都会被进行响应式数据代理,都具有响应式,所以vue3不需要$set
//注意 :ref、reactive 响应式函数
// ref(基本数据类型)=====>响应式原理依旧是 Object.defineProperty 进行响应式数据劫持处理
//ref(对象)=====>转成使用reactive来进行处理====>Proxy 来进行响应式数据劫持处理
//reactive(对象)===> proxy 来进行响应式数据劫持处理