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)}
})