Vue3中的shallowRef 和shallowReactive

最新推荐文章于 2024-07-27 13:48:39 发布

疆~

最新推荐文章于 2024-07-27 13:48:39 发布

阅读量228

点赞数

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

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

版权

Vue3 专栏收录该内容

41 篇文章 9 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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>