vue3 之 组合式API—reactive和ref函数
ref（）
作用：接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤：
1️⃣ 从 vue 包中导入 ref 函数
2️⃣在
<script setup>
// 导入
import { ref } from 'vue'
// 执行函数 传入参数 变量接收
const count = ref(0)
const setCount = ()=>{
// 修改数据更新视图必须加上.value
count.value++
}
</script>
<template>
<button @click="setCount">{{count}}</button>
</template>
reactive()
作用：接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤：
1️⃣ 从 vue 包中导入 reactive 函数
2️⃣ 在
<script setup>
// 导入
import { reactive } from 'vue'
// 执行函数 传入参数 变量接收
const state = reactive({
msg:'this is msg'
})
const setSate = ()=>{
// 修改数据更新视图
state.msg = 'this is new msg'
}
</script>
<template>
{{ state.msg }}
<button @click="setState">change msg</button>
</template>
总结
1️⃣ reactive和ref函数的共同作用是什么 ？
用函数调用的方式生成响应式数据
2️⃣ reactive vs ref ？
reactive不能处理简单类型的数据
ref参数类型支持更好但是必须通过.value访问修改
ref函数的内部实现依赖于reactive函数
3️⃣ 在实际工作中推荐使用哪个？
推荐使用ref函数，更加灵活