Vue3和Vue2响应式原理对比

Vue3的响应式原理

vue2响应式

对象类型：通过Object.defineProperty()对属性进行读取，修改进行拦截（数据劫持） 数组类型：通过重写更新数组的一系列方法实现拦截 在对象中添加一个属性VUE.set(“给谁添加属性”,“属性名(或者是修改的值的索引)”,“属性值”)this.$set(“给谁添加属性”,“属性名”,“属性值”) 在对象中删除一个属性VUE.delete(“给谁添加属性”,“属性名”,“属性值”)this.$delete((“给谁添加属性”,“属性名”,“属性值”)) 在数组中修改某个属性，使用数组的API进行修改，this.xxx.splice(0,1,“xxx”)

vue3响应式

vue3不存在vue2监测不到数据更改的问题 原理：window内置的proxy(“代理对象”,{get(target,propName){return target[propName]}，set(target,propName,value){target[propName]=value},deleteProperty(target,propname){delete target[propName]}) window.proxy(xxx,{ get(target,propName)//有人读取xxx的某个属性时调用 { return target[propName]}, set(target,propName,value)//有人修改或者追加某个属性时调用 { target[propName]=value} deleteProperty(target,propname)//有人删除某个属性时调用 { delete target[propName]} })

vue使用的：

window.Reflect.get(“目标对象”，“目标”)

window.Reflect.set(“目标对象”，“目标”，“值”)

window.Reflect.deleteProperty(“目标对象”，“目标”)

window.proxy(xxx,{
    get(target,propName)//有人读取xxx的某个属性时调用
    	{return Reflect.get(target,propName)},
    set(target,propName,value)//有人修改或者追加某个属性时调用
		{Reflect.set(target,propName,value)}
    deleteProperty(target,propname)//有人删除某个属性时调用
		{Reflect.deleteProperty(target,propName)}
})