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进行创建响应式数据