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中如何引入jQuery和Bootstrap，详细的介绍了引入jQuery和Bootstrap的方法，有兴趣的可以了解一下。2017-04-04
这篇文章给大家介绍了vue项目全局配置微信分享思路讲解，使用vue作为框架，使用vux作为ui组件库，具体内容详情大家跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要介绍了vue项目配置代理如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最近在学习或工作中遇到,把Vue前端项目打包后,要求可以再次修改请求后端接口的基础地址,下面这篇文章主要给大家介绍了关于vue前端灵活改变后端地址的两种方式,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue+golang实现上传微信头像功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要为大家详细介绍了基于Vue实现图书管理功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
下面小编就为大家分享一篇vue.js2.0点击获取自己的属性和jquery方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下2019-07-07
vue使用elementui的el-menu的折叠菜单collapse示例详解
这篇文章主要介绍了vue使用elementui的el-menu的折叠菜单collapse示例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2023-12-12
最新评论