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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！