在 Vue 3 中，响应式对象可以定义在函数内部。下面从不同响应式 API 的角度详细介绍，并给出相应示例。
1. 使用reactive函数
reactive函数用于创建一个响应式对象。你可以在函数内部使用reactive来定义响应式对象。
示例代码
<template>
<div>
<p>{{ state.message }}</p>
<button @click="updateMessage">更新消息</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
// 定义一个函数，在函数内部创建响应式对象
function createReactiveState() {
return reactive({
message: '初始消息'
});
}
// 调用函数获取响应式对象
const state = createReactiveState();
// 定义更新消息的函数
const updateMessage = () => {
state.message = '更新后的消息';
};
</script>
代码解释
createReactiveState函数内部使用reactive创建了一个响应式对象，该对象包含一个message属性。- 在
<script setup>中调用createReactiveState函数，将返回的响应式对象赋值给state。 - 点击按钮时，调用
updateMessage函数更新state.message的值，页面会自动更新显示新的消息。
2. 使用ref函数
ref函数用于创建一个响应式的引用对象。同样可以在函数内部使用ref来定义响应式对象。
示例代码
<template>
<div>
<p>{{ count.value }}</p>
<button @click="increment">增加计数</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 定义一个函数，在函数内部创建响应式引用
function createReactiveCount() {
return ref(0);
}
// 调用函数获取响应式引用
const count = createReactiveCount();
// 定义增加计数的函数
const increment = () => {
count.value++;
};
</script>
代码解释
-
createReactiveCount函数内部使用ref创建了一个初始值为0的响应式引用对象。 -
在
<script setup>中调用createReactiveCount函数，将返回的响应式引用对象赋值给count。 -
点击按钮时，调用
increment函数增加count.value的值，页面会自动更新显示新的计数值。
综上所述，无论是使用reactive还是ref，都可以在函数内部定义响应式对象，并且这些响应式对象在函数外部同样可以正常使用和响应数据变化。至于定义的响应式对象没有返回，那和定义一个变量没啥区别，毕竟响应式对象是和虚拟dom更新和响应式监听相关的。
