vue3shallowReactive与shallowRef

Posted 2021-12-13 web半晨

目录

• 1、概念
• 2、示例代码

---

1、概念

●shallowReactive:只处理对象内最外层属性的响应式，也就是浅响应式。
●shallowRef:只处理value的响应式, 不进行对象的reactive处理。
●什么时候用浅响应式呢?
○一般情况下使用ref和reactive即可。
○如果一个对象数据, 结构比较深, 但变化时只是外层属性变化使用shallowReactive。
○如果一个对象数据, 后面会产生新的对象来替换使用shallowRef。

---

2、示例代码

<template>
  <h2>shallowReactive和shallowRef</h2>
  <h3>m1:{{ m1 }}</h3>
  <h3>m2:{{ m2 }}</h3>
  <h3>m3:{{ m3 }}</h3>
  <h3>m4:{{ m4 }}</h3>
  <hr />
  <button @click="update">更新数据</button>
</template>

---

import {
  defineComponent,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
} from "vue";

export default defineComponent({
  name: "App",
  setup() {
    // 深度劫持(深监视)----深度响应式
    const m1 = reactive({
      name: "鸣人",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });
    // 浅劫持(浅监视)----浅响应式
    const m2 = shallowReactive({
      name: "鸣人",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });
    // 深度劫持(深监视)----深度响应式----做了reactive的处理
    const m3 = ref({
      name: "鸣人",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });
    // 浅劫持(浅监视)----浅响应式
    const m4 = shallowRef({
      name: "鸣人",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });
    const update = () => {
      // 更改m1的数据---reactive方式
      // m1.name += '=='
      // m1.car.name += '=='
      // 更改m2的数据---shallowReactive
      // m2.name += '=='
      // m2.car.name += '==='
      // 更改m3的数据---ref方式
      // m3.value.name += '==='
      // m3.value.car.name += '==='
      // 更改m4的数据---shallowRef方式
      // m4.value.name += '==='
      // m4.value.name += '==='
      console.log(m3, m4);
    };
    return {
      m1,
      m2,
      m3,
      m4,
      update,
    };
  },
});