1.Vue2的响应式原理:
通过Object.defineProperty()对数据进行劫持,调用set&&get方法操作数据后返回,当读取对象中属性时会调用get方法,修改调用set方法,缺点:无法观测到删除数据和新增数据的变化,官方也给了解决方案:this.$Set()或者this.$forceUpdate()强制更新dom
Vue2响应式的简易实现:
//源数据
let person = {
name: "zhangsan",
age: 18,
height: 188,
};
//vue2的响应式
let p = {};
for (let key in person) {
Object.defineProperty(p, key, {
get() {
console.log(`读取了${key}属性`);
return person.key;
},
set(value) {
console.log(`修改了${key}属性,更新页面`);
person.key = value;
},
});
}
2.Vue3的响应式原理:
1.通过Proxy代理拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
2.通过Reflect(反射): 对源对象的属性进行操作
Reflect其中某些方法与Object相同,如defineProperty()等,Reflect让Object操作都变成函数行为
Vue3的基本实现:
let person = {
name: "zhangsan",
age: 18,
height: 188,
};
const p = new Proxy(person,{
set(target,propName,value){
console.log(`设置${propName}值为${value}`)
// target[propName] = value
Reflect.set(target,propName,value)
},
//target:原数据 propName:参数名
get(target,propName){
console.log(`读取${propName}属性`)
// return target[propName]
return Reflect.get(target,propName)
},
//property 待删除的属性名
deleteProperty(target,property){
console.log(`删除${property}属性`)
// return delete target[property]
return Reflect.deleteProperty(target,property)
}
})