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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue可滑动的tab组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
vue使用Vue.extend方法仿写个loading加载中效果实例
在vue中提供v-loading命令,用于div的loading加载,下面这篇文章主要给大家介绍了关于vue使用Vue.extend方法仿写个loading加载中效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了多个vue项目复用一个node_modules的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
这篇文章主要介绍了Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-05-05
fontawesome的图标有免费版和专业版,本文主要使用free版本,一般free版本的图标够用,free图标又划分为三个图标库,主要有实心图标solid、常规图标regular及品牌图标brand,根据需求去下载对应的图标库,无须全部下载,对vue fontawesome图标库相关知识感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了vue3输入无效路由跳转到指定error页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue跳转外部链接始终有localhost的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了Vue生命周期区别详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue中checkbox如何修改为圆形样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论