Vue3中的响应式函数reactive和ref

reactive函数

reactive的作用是接受一个对象类型的数据的参数传入，并返回一个响应式的对象。基本使用步骤是从vue导入reactive，然后创建一个对象等于“const demo=reactive()”即可，此时的demo就是一个响应式的对象类型，即就是说，demo在template中或者js中任何一方发生变化，另一方都会跟着自动变化。示例：计数器案例。

ref函数

ref函数和reactive函数类似，都是用来定义响应类型的数据。但是reactive接收的是对象类型的数据，ref接收的是普通类型的数据。使用方法也比较简单，比如“const count=ref(0)”，这样就定义了一个整数类型的响应式数据。需要注意的是，在js中修改ref的变量是，实际上要修改其value，比如“count.value++”，而在模板中使用时，则是直接渲染ref定义的变量自身，比如“{}”。reactive和ref函数的共同作用是通过函数调用的方式生成响应式数据。但是reactive不能处理简单类型的数据，ref参数类型支持得更好，但是必须通过.value进行访问修改，ref函数内部依赖于reactive函数。在实际工作中，推荐使用ref函数，更加灵活。也可以根据自己的需要，如果是对象类型则使用reactive函数，普通类型则使用ref函数。

示例：通过ref实现计数器。