Vue3组合式API - reactive和ref函数

reactive函数

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

步骤

一.从vue包中导入reactive函数

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

<script setup>
 import { reactive } from 'vue'  // 导入
 
 const state = reactive({       // 执行函数 传入参数 变量接收
   count:0
 })
 const add = ()=>{
   state.count++ // 修改数据更新视图
 }
</script>

<template>
  <button @click="add">{{state.count}}</button>
</template>

注意：

1. 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新
2. reactive必须要传入一个类型为对象的数据，不支持基本数据类型。 vue提供了更加适用的ref函数。

ref函数

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

步骤

一.从vue包中导入ref函数

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

    a.在模板中使用数据不需加.value

     b. 在代码中使用数据要加.value

<script setup>
 import { ref } from 'vue' // 导入
 const count = ref(0)
 const setCount = ()=>{  // 执行函数 传入参数 变量接收
   console.log(count)
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

reactive 对比 ref

1. 相同点：都是用来生成响应式数据
2. 不同点:

        a.reactive不能处理简单类型的数据

        b.ref参数类型支持更好，但是必须通过.value做访问修改

        c.ref函数内部的实现依赖于reactive函数

     3.在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担