Vue3中的shallowRef 和shallowReactive对比分析
更新时间：2023年01月05日 09:37:10 作者：疆~
这篇文章主要介绍了Vue3中的shallowRef 和shallowReactive,通过示例代码逐一对他们的使用做的详细介绍，文末补充介绍了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用，需要的朋友可以参考下
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>
关于Vue3中shallowRef和shallowReactive的使用 可以参考下。
vue3的shallowRef()、shallowReactive()和shallowReadonly()
1.shallowReactive()：使用shallowReactive转化的对象只有对象的第一层级有响应式。
2.shallowRef()：使用shallowRef转化的基本数据类型和使用ref没有差别，使用shallowRef转化的对象都会失去响应式。
3.shallowReadonly()：使用shallowReadonly转化的对象，只会在对象第一层级才有只读，除此之外都还具有响应式。
3.运用场景
如果有数据是别的组件传过来的，并且要求该数据不可修改，可以使用readOnly来转化该数据，防止你改动了数据而影响别的组件。
到此这篇关于Vue3中的shallowRef 和shallowReactive的文章就介绍到这了,更多相关Vue3中shallowRef 和shallowReactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了ssm+vue前后端分离框架整合实现(附源码)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue中父子组件的值传递与方法传递，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
今天小编就为大家分享一篇Vue点击切换颜色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用Vue动态生成form表单的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue3使用ref的性能警告问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
XSS 攻击是页面被注入了恶意的代码,下面这篇文章主要给大家介绍了一次VUE项目中遇到XSS攻击的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2021-12-12
本文主要介绍了vue菜单栏联动内容页面tab的实现示例,左侧菜单栏与右侧内容部分联动,当点击左侧的菜单,右侧会展示对应的tab,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
Vue中生命周期包括多个阶段,如created和mounted,每阶段有特定钩子函数,生命周期与浏览器渲染过程密切相关,了解这些可以优化页面渲染和数据处理,created阶段适用于数据初始化,而mounted阶段适合进行DOM操作和页面渲染后的处理2024-10-10
Vue.js中的watch选项用于监听Vue实例上某个特定的数据变化,下面这篇文章主要给大家介绍了关于Vue3 Watch踩坑实战之watch监听无效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue element table表格相同名称列合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论