shallowReactive 和 shallowRef 函数

• shallowReactive

  浅层次的定义响应式数据，只考虑数据的第一层数据，更深层次的数据不进行响应式数据处理

  import { shallowReactive } from "vue";
  export default {
    setup() {
      let a = shallowReactive({
        b: 4, //此处为响应式数据
        c: {
          //此处为响应式数据
          d: {
            //此处为非响应式数据
            e: 5, //此处为非响应式数据
          },
        },
      });
      return {};
    },
  };
  

  当一个对象，结构比较深，且变化的数据只是最外层的数据时，可以进行浅层的响应式数据处理

• shallowRef

  当定义的数据类型为复杂数据类型时，不会自动将复杂数据类型的数据转换为 reactive 的响应式数据。简单数据类型时，与 ref 没有区别

  import { shallowRef } from "vue";
  export default {
    setup() {
      //此处为响应式数据，与 ref 无区别
      let a = shallowRef(0);
  
      //此处为非响应式数据，.value 的值为普通对象
      let b = shallowRef({
        a: 1,
      });
  
      return {};
    },
  };
  

  当一个对象数据，后续不会修改对象中的属性，而是第一次进行读取，修改时是生成新的对象进行替换