Vue的响应式原理分析

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

( 1.) Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
Object.defineProperty是可以监听数组下标变化的，对于javascript来讲，数组也是属于Object。

为什么Vue不劫持数组？

一、因为数组的位置不固定，数量多变，正常对象key对应value一般不会变，但是如果数组删除了某个元素，比如第一个元素被删除或者头部增加一个元素，那么将导致后面所有的key对应value错位，如果6个元素，也就会触发5次set。

二、数组元素可能非常非常多，每个元素进行劫持有一定浪费，这可能是Evan you对性能的考虑。

三、Vue将数组的7个变异方法进行了重写，也就是更改了Array原型上的方法达到劫持变化。

直接上代码测试：

const arr = [1, 2, 3, 4, 5, 6]

for (let key in arr) {
    let value = arr[key]
    Object.defineProperty(arr, key, {
        get() {
            console.log(`get: ${key}`)
            return value
        },
        set(newValue) {
            console.log(`set: ${key} to ${newValue}`)
            return value = newValue
        }
    })
}


arr[0] = 999 // 打印：set：0 to 999
arr[3] // 打印：get：3
arr.shift() // 会导致5次前移，所以产生5次get和5次set
/*
get: 1
set: 0 to 2
get: 2
set: 1 to 3
get: 3
set: 2 to 4
get: 4
set: 3 to 5
get: 5
set: 4 to 6
*/

( 2. ) Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象。
Proxy虽然是劫持的整个对象，但也是浅层劫持，属性值是对象时同样也需要深度遍历，不然该属性对象的变化也无法监测到。
测试：

const obj = {
    count: 5,
    user: { name: 'JavaScript', age: 22 }
}


const proxiedObj = new Proxy(obj, {
    get(target, key) {
        console.log(`get：${key}`)
        return target[key]
    },
    set(target, key, value) {
        console.log(`set：${key} to ${value}`)
        return target[key] = value
    }
})


proxiedObj.user.name = 'Golang'
/*
只会触发一次get user即：
get：user
*/

怎么深度劫持？也很简单，直接上代码：

function deepProxy(obj) {
    return new Proxy(obj, {
        get(target, key) {
            console.log(`get：${key}`)
            if (typeof target[key] === 'object' && target[key] !== null) {
                return deepProxy(target[key]) // 递归劫持
              }
              return target[key]
          },
          set(target, key, value) {
              console.log(`set：${key} to ${value}`)
              return target[key] = value
          }
      })
  
  
  }
  const obj = {
      count: 5,
      user: { name: 'JavaScript', age: 22 }
  }
  
  
  const proxiedObj = deepProxy(obj)
  proxiedObj.user.name = 'Golang'/*
  控制台如下：
  get：user
  set：name to Golang
  */

/* 修改/访问 原先不存在的属性 */ 
  console.log(proxiedObj.someProp) // get: someProp
  proxiedObj.someProp = 'some value' // set: someProp to some value

所以为什么proxy优于Object.defineProperty？

从以上的例子就能看到，Object.defineProperty必须“预先”劫持属性。被劫持的属性才会被监听到。所以后添加的属性，需要手动再次劫持。

而proxy代理了整个对象，不需要预先劫持属性，而是在获取/修改的时候，通过get/set方法来告诉你key。所以不管如何新增属性，总是能被捕获到。