vue2响应式原理与vue3响应式原理对比

VUE2.0

• 核心
  • 对象：通过Object.defineProtytype()对对象的已有属性值的读取和修改进行劫持
  • 数组：通过重写数组更新数组一系列更新元素的方法来实现元素的修改的劫持

  Object.defineProperty(data,'count',{
  	get() {},
  	set() {}
  })
  

``

• 问题
  • 对象直接新添加的属性或删除已有属性，界面不会自动动更新
  • 直接通过下标跟元素或更新length，界面不会自动更新

VUE3.0

• 核心
  • 通过Proxy代理,拦截对data任意属性的任意操作，包括属性值的读写，属性的添加，属性的删除等
  • 通过Reflect： 动态对被代理对象的相应属性进行特定的操作

  new Proxy(data, {
  //拦截读取属性值
  get (target,prop) {
  	return Reflect.get(target, prop)
  },
  //拦截设置属性值或添加新属性
  set (target, prop, value) {
  	return Relect.set(target, prop, value)
  },
  deleteProperty (target, prop) {
  	return Reflect.deleteProperty(target, prop)
  }
  })
  
  proxy.name = 'tom'