Vue 3的响应式机制

什么是响应式

        Js代码是自上而下执行的，结合下面代码看，代码执行后，会打印两次double的结果，结果也都是2，即使修改了代码中count的值后，double的值也不会发生任何改变。

let count = 1
let double = count * 2
console.log(double)
count = 2
console.log(double)

double的值由count的值乘以2所得，若想让double能够在count变化时也变化，那就要在每次修改countd的值时，重新计算double。如下面代码

let count = 1
// 计算过程封装成函数
let getDouble = n=>n*2 //箭头函数
let double = getDouble(count)
console.log(double)


count = 2
// 重新计算double，这里我们不能自动执行对double的计算
double = getDouble(count)
console.log(double)

 若可以将getDouble函数自动执行，我们使用某种机制把count包裹一层，每当count进行修改时，就去同步更新double的值，那就有了double自动跟着count变化而变化的感觉，这就是响应式的雏形。

响应式的原理

        Vue中用过defineProperty、Proxy和value setter三种响应式解决方案。

 defineProperty API   

        结合例子来说明，下面定义一个对象obj,使用defineProperty代理count属性。这样就对obj对象的value属性实现了拦截，读取count属性时执行get函数，修改count属性时执行set函数，并在set函数内部重新计算了double。这样就实现了简易的响应式功能。

let getDouble = n=>n*2
let obj = {}
let count = 1
let double = getDouble(count)

Object.defineProperty(obj,'count',{
    get(){
        return count
    },
    set(val){
        count = val
        double = getDouble(val)
    }
})
console.log(double)  // 22222
obj.count = 2
console.log(double) // 4444  有种自动变化的感觉

  defineProperty  API作为Vue2实现响应式的原理，语法上也有一些缺陷，比如如下代码中，删除obj.count属性，set函数就不会执行，double还是之前的值，这也是为什么Vue2中,需要$delete一个专门的函数去删除数据。

delete obj.count
console.log(double) // doube还是4

Proxy

        Vue3的响应式机制就是基于Proxy实现的，从Proxy这个名字也能看出是代理的意思，Proxy的重要意义在于它解决了Vue2响应式的缺陷。看下面代码，通过new Proxy代理obj这个对象,然后通过get、set和deteleProperty函数代理了对象的读取、修改和删除操作，从而实现了响应式的功能。

let proxy = new Proxy(obj,{
    get : function (target,prop) {
        return target[prop]
    },
    set : function (target,prop,value) {
        target[prop] = value;
        if(prop==='count'){
            double = getDouble(value)
        }
    },
    deleteProperty(target,prop){
        delete target[prop]
        if(prop==='count'){
            double = NaN
        }
    }
})
console.log(obj.count,double)
proxy.count = 2
console.log(obj.count,double) 
delete proxy.count
// 删除属性后，我们打印log时，输出的结果就会是 undefined NaN
console.log(obj.count,double) 

 Proxy是针对对象来监听的，而不是针对某个具体属性，所以不仅可以代理那些定义时不存在的属性，还可以代理更丰富的数据结构，比如Map、Set等，并且还能通过deleteProprety实现对删除操作的代理。

value setter

Vue3中还有一种响应式实现的逻辑，就是利用对象的get和set函数来进行监听，这种响应式的实现方式，只能拦截某一个属性的修改，这也是Vue3中ref的实现，在下面代码中，拦截了count的value属性，并且拦截了set操作，也能实现了类似的功能。

let getDouble = n => n * 2
let _value = 1
double = getDouble(_value)

let count = {
  get value() {
    return _value
  },
  set value(val) {
    _value = val
    double = getDouble(_value)

  }
}
console.log(count.value,double)
count.value = 2
console.log(count.value,double)

 三种实现原理的对比

实现原理	defineProperty	Proxy	value setter
实际场景	Vue2响应式	Vue3  reactive	Vue3 ref
优势	兼容性	基于Proxy实现真正的拦截	实现简单
劣势	数组和属性删除等拦截不了	兼容不了IE11	只拦截了value属性
实际应用	Vue2	Vue3复杂数据结构	Vue3简单数据结构