探索vue3响应式原理

探索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 } }