vue3组合式API-reactive()和ref()函数的使用

---

前言

reactive和ref函数的用法

---

一、reactive()函数

作用：接受对象类型数据的参数传入并返回一个响应式的对象

1、使用步骤

（1）从vue包中导入reactive函数

（2）在 <script setup> 中执行reactive函数并传入类型为对象的初始值，并使用变量接收返回值

代码如下（示例）：

<script setup>  
//1、导入函数
import{reactive}from 'vue'
//2、执行函数 传入一个对象类型的参数 变量接收
const state = reactive({        //把这里的reactive去掉，state变成普通对象，count值不会被更新
    count:0
})
const setupCount=()=>{
    state.count++
}
</script>
<template>
<div>
    <button @click="setupCount">{{ state.count }}</button>
</div>
</template>

在上面代码中，reactive的使用，使得state变成响应式对象，并初始化了一个属性count，初始值为0。定义名为setupCount的函数，当按钮被点击时，会将state.count的值加1。 然后写一个按钮绑定一个点击事件触发setupCount函数让count做自增运算，可以看到鼠标每点击一下，count值就会自增1，从而实现了一个简单的计数器

二、ref()函数

作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象

1、使用步骤

（1）从vue包中导入ref函数

（2）在 <script setup> 中执行ref函数并传入初始值，并使用变量接收返回值

代码如下（示例）：

<script setup>
//1、导入ref函数
import {ref} from 'vue'

//2、执行函数 传入参数（简单类型、对象类型） 变量接收
const count = ref(0)   //Number类型count初始值为0，ref使之成为响应式对象
const setupCount = () =>{
    //脚本区域修改ref产生的响应式对象数据必须通过.value属性来更改值
    count.value++
}
</script>
<template>
<div>
    <button @click="setupCount">{{ count }}</button>
</div>
</template>

ref与reactive的语法是差不多的，需要注意的是ref不仅能对普通对象进行处理，也可以接收简单类型的数据，比如上面代码中的Number类型数据；ref在修改数据时需要通过.value属性来更改值

---

总结

• reactive和ref都能将传入的数据转换为响应式的对象；
• reactive不能处理简单类型的数据，只能传入对象；
• ref支持接收简单类型和对象类型的数据，但必须通过.value来访问修改数据。