【Vue3】shallowRef和shallowReactive

shallowRef

作用：创建一个响应式对象，只对顶层属性进行响应式处理。

特点：只跟踪引用值的变化，不关心值内部的属性变化。

shallowReactive

作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式，对象内部的嵌套属性则不会改变。

特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。

<template>
  <div>
    <h2>用户1 --- shallowRef</h2>
    <div>
      姓名：{{ user1.name }} <button @click="user1.name = '李四'">修改</button>
    </div>
    <div>
      年龄：{{ user1.age }} <button @click="user1.age = 22">修改</button>
    </div>
    <button @click="user1 = { name: '王五', age: 20, info: { height: 180 } }">
      换个用户
    </button>
    <div>
      身高：{{ user1.info.height }}
      <button @click="user1.info.height = 188">修改</button>
    </div>
  </div>
  <div>
    <h2>用户2 --- shallowReactive</h2>
    <div>
      姓名：{{ user2.name }} <button @click="user2.name = '李四'">修改</button>
    </div>
    <div>
      年龄：{{ user2.age }} <button @click="user2.age = 22">修改</button>
    </div>
    <button
      @click="user2 = { name: '袁公路', age: 200, info: { height: 180 } }"
    >
      换个用户
    </button>
    <div>
      身高：{{ user2.info.height }}
      <button @click="user2.info.height = 188">修改</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, shallowReactive } from "vue"
let user1 = shallowRef({
  name: "张三",
  age: 18,
  info: {
    height: 133,
  },
})
let user2 = shallowReactive({
  name: "田本初",
  age: 23,
  info: {
    height: 173,
  },
})
</script>

<style scoped></style>

总结

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式API创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式带来的性能成本，使得属性的访问变得更快，提升性能。