vue3中reactive赋值，不能响应式变化

在使用vue3中，使用reactive创建的对象或者数组进行赋值时，可以正常赋值，但是不会触发响应式变化。

 let obj = {
     name:张三,
     age:23
 }
 let reactive = reaciive({})
 reactive = obj      // 可以正常赋值，但是不能响应式变化

原因

• vue3官方文档说明：reactive() 返回一个对象的响应式代理
• 为什么不生效： 每次直接把一个对象或者数组赋值给reactive创建的对象或数组时，导致reactive创建的响应式对象被新赋值的直接代理，再vue3中操作的都是proxy代理对象，所以失去了响应式
• 在vue3中不管是对象还是数组都不能直接将整个数据进行赋值，这样会造成reactive定义的响应式失效
• 通俗说： 就像对象的地址被替换，就不是原来的那个对象了

解决方法

不是直接赋值，包裹一层

• 可以直接对它对对象内进行赋值，不是重新赋值，不会失去响应式

let obj = reactive{
    arr: [1,2,3]
})
obj.arr = [4,5,6]   // 还是响应式

直接使用ref

ref赋值时，包裹了一层对象

let arr = reactive([1,2,3])
let arr1 = ref([1,2,3])     // ref重新赋值时，通过.value赋值

为什么会这样

vue3的响应式原理是通过es6的proxy实现的

• proxy 的使用本身就是对于 对象的拦截， 通过new Proxy 的返回值，触发get和set方法，es6的Reflect（反射），动态对被代理对象的相应属性进行特定的操作
• proxy是基于对象的拦截，如果本身是个原始值时，就拦截不到，失去了，所以ref本身实现响应式会使用.value

     let obj = {
      name: "许七安",
      age: 23,
      wife: {
        name: "洛玉衡",
      },
      hobby: ["勾栏听曲", "插花弄玉"],
    };
    let proxy = new Proxy(obj, {
      get: function (target, key) {
        console.log("触发get");
        return Reflect.get(target, key);
      },
      set: function (target, key, value) {
        console.log("触发set");
        return Reflect.set(target, key, value);
      },
    });
    console.log((proxy.name = "许银锣"));
    console.log((proxy.wife.name = "慕楠栀")); // 当修改更深的一层对象时，不会触发set事件，但是会修改
    console.log(proxy);

发现当嵌套一层时，不会触发响应式事件，无法拦截下来，所以这个时候就需要嵌套一层

  let obj = {
      name: "许七安",
      age: 23,
      wife: {
        name: "洛玉衡",
      },
      hobby: ["勾栏听曲", "插花弄玉"],
    };
    function reactive(obj) {
      return new Proxy(obj, {
        get: function (target, key) {
          console.log("触发get");
          // 判断如果是个对象在包装一次，实现深层嵌套的响应式
          if (typeof target[key] === "object") {
                    return reactive(target[key]);
                };
          return Reflect.get(target, key);
        },
        set: function (target, key, value) {
          console.log("触发set");
          return Reflect.set(target, key, value);
        },
      });
    }
    const proxy = reactive(obj)
    console.log((proxy.name = "许银锣"));
    console.log((proxy.wife.name = "慕楠栀")); // 这样就可以监听到set
    console.log(proxy);

这样就是.value嵌套一层实现响应式监听