探索vue3响应式原理
vue3的响应式原理
在vue3中是采用Proxy来实现代理,它需要搭配Reflect来完整的实现整个代理过程。这里我们需要清楚,Proxy是一个对象,它包装了另外一个对象,并允许拦截该对象的任何交互行为。但是使用proxy的时候有一个痛点就是this绑定,我们需要绑定是Proxy这个实例对象,而不是当前对象,因此Reflect能最小代价解决这个问题。
对于vue2的响应式原理,详见官方文档。
简单写一个响应式原理实现过程:
/**
* @description 探索vue3中响应式原理:proxy、reflect
*/
const obj = {
name:'犬夜叉',
age:500,
wife:{
name:'戈薇',
age:16
}
}
const proxyObj = new Proxy(obj,{ // 这里是handler(捕获器)
// get是获取数据
get(target,property){
console.log('********get方法被调用,获取对象');
return Reflect.get(target,property)
},
// set 方法不仅能实现数据的修改也能实现对属性的新增
set(target,property,value){
console.log('************set方法被调用,修改对象');
return Reflect.set(target,property,value)
},
// deleteProperty是删除属性功能
deleteProperty(target,property){
console.log('*****************deleteProperty方法被调用,删除对象')
return Reflect.deleteProperty(target,property)
}
})
console.log('*************修改前*************',proxyObj.name);
result:
// ********get方法被调用,获取对象
//*************修改前************* 犬夜叉
proxyObj.name = '弥勒'
proxyObj.wife.name = '珊瑚'
console.log('*************修改后*************',proxyObj);
result:
//************set方法被调用,修改对象
//********get方法被调用,获取对象
//*************修改后************* { name: '弥勒', age: 500, wife: { name: '珊瑚', age: 16 } }
proxyObj.gender = '半妖'
console.log('*************新增属性*************',proxyObj);
result:
//************set方法被调用,修改对象
//*************新增属性************* { name: '犬夜叉', age: 500, wife: { name: '戈薇', age: 16 }, gender: '半妖' }
delete proxyObj.gender
console.log('*************删除属性*************',proxyObj);
result:
//*****************deleteProperty方法被调用,删除对象
//*************删除属性************* { name: '犬夜叉', age: 500, wife: { name: '戈薇', age: 16 } }