Vue3中数据响应式的4种方式

        在vue3中setup默认返回的普通数据不是响应的，如果希望数据是响应式的，有4种方式，今天我就来和大家介绍一下这4种方式

 （1）reactive（）：reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

代码演示：

运行结果：

点击按钮以后

（2）toRef():当我们在模板中渲染数据时，不希望由前缀的时候可以使用组合-toRef()

toRef()是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的

代码演示：

（3）toRefs():toRefs函数可以定义转换响应式中所有属性为 响应式数据，通常用于结构reactive定义的对象，转换响应式对象中所有属性（也可以是一部分）为单独响应式数据，对象成为普通对象，并且值是关联的

具体代码表示：

（4）ref函数定义响应式数据，一般用于简单类型数据

使用ref()函数时，通常要注意两点：

（1）在修改值和获取值的时候，需要.value

(2)在模板中使用ref申明的响应式数据，可以省略.value

具体代码表示

ref主要是用于定义基本数据类型的数据并保证响应式能力，也可以用于对象或数据