Vue2

Vue2使用Object.defineProperty实现数据的劫持

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false，
  get:function(){},
  set:function(){}
});

Vue2通过对创建的Vue实例对象进行逐级的递归检测，对每个属性进行处理

只能检测对象已有的属性，后增加的属性无法进行响应式的监测

Vue3

使用Proxy与Reflect实现

基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除。
不需要一次性遍历data的属性，可以显著提高性能。
因为Proxy是ES6新增的属性，有些浏览器还不支持,只能兼容到IE11 。

语法

A = {}
B = {
  get:function(){}
  set:function(){}
}

const proxy = new Proxy(A, B)
console.log(proxy.A)

核心思路

 const proxyData = new Proxy(data, {
   get(target,key,receive){ 
     // 只处理本身(非原型)的属性
     const ownKeys = Reflect.ownKeys(target)
     if(ownKeys.includes(key)){
       console.log('get',key) // 监听
     }
     const result = Reflect.get(target,key,receive)
     return result
   },
   set(target, key, val, reveive){
     // 重复的数据，不处理
     const oldVal = target[key]
     if(val == oldVal){
       return true
     }
     const result = Reflect.set(target, key, val,reveive)
     return result
   },
   // 删除属性
   deleteProperty(target, key){
     const result = Reflect.deleteProperty(target,key)
     return result
   }
 })

Vue的响应式原理速记

Vue2

Vue3