Vue2中的响应式原理
实现Vue2响应式是通过Object.defineProperty()
来实现的,使用数据劫持
的方法。
具体如下:
let obj = {name:'张三',age:18}
// vue2
let p = {}
for(let key in obj){
Object.defineProperty(p,key,{
get(){
return obj.name
},
set(value){
obj[key]=value
}
})
}
console.log(p.name); //张三
p.name='李四'
console.log(p.name); //李四
此时,p对象就完成了对obj对象的代理,当读取p.name时,实际上是在读取obj.name,当修改p.name时,实际上obj中name属性的值也会随之更新。
但是,在Vue2中,无法通过p对象对obj对象进行增和删的操作,实际上obj对象是捕获不到的,所以即便通过p对象删除和增加属性,obj对象内的属性是不会更新的。
Vue3中的响应式原理
实现原理:
通过Proxy(代理): 拦截对象中任意属性的变化,包括:属性值的读写,属性的增加,属性的删除等。
代码如下:
let obj = {name:'张三',age:18}
const handler = {
get:function(obj,prop){
console.log(obj,prop,'get');
return obj[prop]
},
set:function(obj,prop,value){
console.log(obj,prop,value,'set');
obj[prop] = value
return obj
},
deleteProperty(obj, prop){
console.log(obj,prop,'delete');
return delete target[prop]
}
}
let proxy = new Proxy(obj,handler)
console.log(proxy.name); //张三
proxy.name = '李四'
console.log(proxy.name); //李四
delete proxy.name
console.log(proxy.name); //undefined
Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。
被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量(保持不变的语义)。
参数:
target:
要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler:
一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为。
Reffect
Reflect是一个组合的对象,它提供了阻止 JavaScript 操作的方法。Reflect不是一个函数对象,因此它是不可构造的。
在reffect身上,就有defineProperty()
这个方法
代码如下:
let obj = {name:'张三',age:18}
const handler = {
get:function(obj,prop){
return Reflect.get(obj, prop)
},
set:function(obj,prop,value){
return Reflect.set(obj, prop, value)
},
deleteProperty(obj, prop){
return Reflect.deleteProperty(obj, prop)
}
}
let proxy = new Proxy(obj,handler)
console.log(proxy.name); //张三
proxy.name = '李四'
console.log(proxy.name); //李四
delete proxy.name
console.log(proxy.name); //undefined
不管是通过p对象对obj对象进行增删改查任意一种操作,都能监测到,同时数据也能得到更新,对比起Vue2来说,确实真正意义上实现了数据的完全式响应。
而在Vue3数据的更新是proxy配合Reffect来实现的