vue3中的ref、reactive问题解析
ref 和 reactive都是vue3推出的针对组合式设计的声明响应式状态的API，两者在使用之前都要先进行引入
import { ref,reactive } from 'vue'1.ref
ref用于将一个普通类型的数据转成响应式对象
使用ref进行创建的响应式数据在模板中可以直接使用，但是在<script></script>标签中使用需要加上（ .value）进行获取数据
直接打印ref响应式数据，数据如下：
既然使用ref那么复杂，为什么还要使用ref进行创建响应式对象呢？
官网给出的解释是：当你在组件中使用了ref进行创建一个响应式对象，当数据变化是，系统会自动追踪到数据的变换，从而进行相应的DOM进行渲染。另一个好处是，使用ref进行创建的响应式数据和普通数据相比，可以将ref传递给函数，这样可以保留对最新值和响应式的访问。
2.reactive
reactive用于将一个普通的对象装成一个响应式数据
reactive在vue中的使用如图所示：
打印reactive的创建的响应式数据
通过打印的数据对比发现，reactive 创建的响应式数据是一个响应式的Proxy对象
两者区别：
1.reactive 的参数一般是对象或者数组，是深层次的，能够将复杂的数据类型变为响应式数据；
2.ref 的参数可以是基本数据类型，也可以是对象，或者数组
注：ref的参数是对象时，其实本质还是基于reactive进行转成响应式数据，系统会自动添加一个属性 value
3.使用ref可以修改整个对象实例，而使用reactive不可以
4.两者都是基于Proxy进行实现的，因为vue3的响应式原理就是基于Proxy
使用ref时，页面上面会有很多的 .value ,好处是reactive能做的事情ref基本上都可以，而ref能做的reactive不一定可以做。但是也不推荐盲目的使用ref进行创建响应式数据
到此这篇关于vue3中的ref、reactive的文章就介绍到这了,更多相关vue3 ref、reactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下2023-09-09
Vue3计算属性computed和监听属性watch区别解析
计算属性适用于对已有的数据进行计算,派生新的数据,并在模板中使用；而监听属性适用于监听数据的变化,并执行一些特定的操作,根据具体的需求和场景,选择适合的机制这篇文章主要介绍了Vue3计算属性computed和监听属性watch,需要的朋友可以参考下2024-02-02
本篇文章主要介绍了Vue中如何实现轮播图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue多页面项目中路由如何使用history模式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
Vue3响应式高阶用法之shallowReadonly()使用
在前端开发中,Vue3的shallowReadonly() API允许开发者创建部分只读的状态,这对于保持顶层属性不变而内部属性可变的场景非常有用,本文将详细介绍 shallowReadonly() 的使用方法及其应用场景,具有一定的参考价值,感兴趣的可以了解一下2024-09-09
本文给大家分享了VUE制作点击按钮出现水波纹效果的组件过程，对此有需求的朋友可以跟着学习下。2018-04-04
Vue中activated和deactivated生命周期钩子在keep-alive组件中的使用详解
Vue中keep-alive的activated和deactivated钩子用于管理缓存组件的激活与停用状态,提升性能,created初始化数据,mounted操作DOM,其他常用钩子包括beforeCreate、beforeMount、beforeUpdate、updated、beforeUnmount和unmounted2025-07-07
这篇文章主要介绍了vue3自定义确认密码匹配验证规则的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
vite+vue3项目启动报错Unexpected “%“问题及解决
这篇文章主要介绍了vite+vue3项目启动报错Unexpected “%“问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue.js开发实现全局调用的MessageBox组件实例代码
最近学习了Vue.js，感觉组件这个地方知识点挺多的，而且很重要，所以决定记录下，下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-11-11
最新评论