浅聊vue3响应式

随着vue3的生态越来越成熟，外面也越来越多的企业应用到了vue3，当然面试也有少企业会问到vue3的一些面试题，其中比较常问到的就是vue3的响应式和vue2的有什么区别？这里就简单的聊下其他的区别并且简单的聊下下vue3的原理。

vue2的响应式

• 核心

  • 对象：通过defineProperty 重新定义一遍目标对象，完成对目标对象的劫持，值发生变化后触发set方法后通知订阅者告诉某个属性发生变化。

  • 数组；通过重写数组更新数组一系列更新袁术的方法来实现元素的修改和劫持。

• 问题

  • 对象直接添加属性或删除已有的属性，界面不会自动更新。需要使用$set()。

  • 数组直接通过下表替换元素或者更新length界面不会自动更行。

vue3响应式

• 核心

  • 通过proxy（代理）对目标对象进行劫持（劫持方式13种），包括属性值的读写，属性的添加，属性的删除等

  • 通过reflect（反射）动态对被代理的对象相应属性进行特定的操作。

eg:

<script>
    let obj={
      name:'房东的猫',
      age:23,
    }
    //  proxy接收两个参数(target,handler) target 目标对象   handler参数也是一个对象，用来定制拦截行为。
    let proxyObj =new Proxy(obj,{
      // 拦截读取属性值 get接收3个参数  target目标对象 prop属性  proxy实列本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。
      get(target,prop){
        console.log('get执行了');
        // Reflect反射方法 也有自己的get个set方法   同样接收3个参数 target 目标对象  prop属性  val要修改的值
        return Reflect.get(target,prop)
      },
      // 拦截设置新的属性值或者添加新的属性
      set(target,prop,val){
        console.log('set执行')
        return Reflect.set(target,prop,val)
      },
      // 拦截删除属性
      deleteProperty(target,prop){
        console.log('del执行');
        return Reflect.deleteProperty(target,prop)
      }
    })
    // 读取属性
    console.log(proxyObj.name); //get执行
    // 设置属性
    // proxyObj.name='谷爱凌'//set执行
    proxyObj.sex='女'// set 执行
    console.log(proxyObj);//proxy代理对象
    console.log(obj);//原对象

    // 删除属性
   delete proxyObj.sex; //del执行
   console.log(proxyObj);//proxy代理对象
    console.log(obj);//原对象
  </script>

以上的代码就是详细的介绍了proxy和Reflete的详细使用，当然官方的肯定比这个复杂些，这个只是方便我们更好的理解和学习。