Vue - shallowRef 和 shallowReactive

一、shallowRef 和 shallowReactive

（一）shallowRef

在 Vue 3 中，shallowRef 是一个用于创建响应式引用的 API，它与 ref 相似，但它只会使引用的基本类型（如对象、数组等）表现为响应式，而不对嵌套对象内的属性进行深层响应。也就是说，使用 shallowRef 进行响应式数据管理时，对象的深层属性不会自动变为响应式。

使用场景

当不需要整个对象的深层响应式时，使用 shallowRef 可以提高性能，减少不必要的响应式代理。
在有些情况下，只关心对象本身的引用变化，而无需追踪其内部属性的变化。

<template>
  <div class="app">
    <h2>和：{
  
  { sum }}</h2>
    <h2>{
  
  { person.name }}，{
  
  {person.age}}岁</h2>
    <button @click="changeSum">sum加一</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改person对象</button>
  </div>
</template>

<script setup lang="ts">
import { ref,shallowRef } from 'vue';

const sum = shallowRef(0)
const person = shallowRef({
  name: '张三',
  age:20,
})
// sum加一
const changeSum =()=>{
  sum.value += 1
}
// 修改名字
const changeName =()=>{
  person.value.name = '李四'
}
// 修改年龄
const changeAge =()=>{
  person.value.age += 1;
}
// 修改person对象
const changePerson =()=>{
  person.value = {name:'Tom',age:56}
}
</script>

<style scoped>

</style>

（二）shallowReactive

在 Vue 3 中，shallowReactive 是一种用于创建响应式对象的 API。它与 reactive 相似，但不同之处在于 shallowReactive 只对对象的第一层属性进行响应式处理，而不对嵌套对象的属性进行深层响应式代理。这使得 shallowReactive 更加轻量，并且在一些情况下可以提高性能。

shallowReactive: 用于创建一个响应式对象，但仅对对象的顶层属性进行代理。对于嵌套属性，则不会变为响应式。
适用场景: 当关心的仅仅是对象的引用变化，而不需要追踪其内部结构的变化时，可以使用 shallowReactive。

import { shallowReactive } from 'vue';

const car = shallowReactive({
  brand: '大众',
  options: {
    color: 'skyblue',
    engine:'V8'
  }
})
// 修改品牌
const changeBrand =()=>{
  car.brand = 'bmw'
}
// 修改颜色
const changeColor =()=>{
  car.options.color = 'red'
}
// 修改引擎
const changeEngine =()=>{
  car.options.engine = '8520'
}