Vue3学习理解：响应式函数reactive和ref

reactive函数

reactive的作用是接受一个对象类型的数据的参数传入，并返回一个响应式的对象。基本使用步骤是从vue导入reactive，然后创建一个对象等于“const demo=reactive({key:value})”即可，此时的demo就是一个响应式的对象类型，即就是说，demo在template中或者js中任何一方发生变化，另一方都会跟着自动变化。示例：计数器案例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55547.html

<script setup>
import {reactive} from "vue";

// 定义响应式对象
const data = reactive({
  count: 0,
})

// 计数器增加
const onAdd = () => {
  data.count++
}

// 计数器减少
const onSub = () => {
  data.count--
}
</script>

<template>
  <div>
    {{ data.count }}
    <button @click="onAdd">+</button>
    <button @click="onSub">-</button>
  </div>
</template>

<style scoped></style>

ref函数

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

示例：通过ref实现计数器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/55547.html

<script setup>
import {ref} from "vue";

// 定义响应式对象
const count = ref(0)

// 计数器增加
const onAdd = () => {
  count.value++
}

// 计数器减少
const onSub = () => {
  count.value--
}
</script>

<template>
  <div>
    {{ count }}
    <button @click="onAdd">+</button>
    <button @click="onSub">-</button>
  </div>
</template>

<style scoped></style>