Vue3中的shallowRef 和shallowReactive

最新推荐文章于 2025-07-04 15:06:10 发布

疆~

最新推荐文章于 2025-07-04 15:06:10 发布

阅读量285

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3 文章标签：前端

本文链接：https://blog.csdn.net/qq_40323256/article/details/128525816

Vue3 专栏收录该内容

41 篇文章

订阅专栏

文章介绍了Vue中的shallowRef和shallowReactive指令，它们分别用于创建只对基本数据类型响应式和对象最外层属性响应式的引用。在示例中，shallowRef只处理数字age的更新，而不处理深层对象属性如user.a.b的变化，后者需要使用shallowReactive来实现其外层属性的响应式更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

shallowRef

只处理基本数据类型的响应式, 不进行对象的响应式处理。

<template>
  <h1>{{ user.age }}</h1>
  <button @click="user.age++">点击+</button>
</template>
  
<script setup lang="ts">
import { reactive, ref, shallowReactive, shallowRef } from 'vue';

let user = shallowRef({
  age: 0
});

</script>

shallowReactive

只处理对象最外层属性的响应式（浅响应式）

<template>
  <h1>user.a.b {{ user.a.b }}</h1>

  <button @click="user.a.b++">点击+</button>

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

let user = shallowReactive({
  age: 0,
  a: {
    b: 0
  }
});

</script>