Vue 3中的ref和reactive都是用于创建响应式数据的API，但它们在数据类型、使用方式、访问方式、设计理念以及应用场景等方面存在明显的区别。
代码示例：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式引用
const count = ref(0);
// 定义一个方法来增加 count 的值
const increment = () => {
count.value++;
};
// 返回需要在模板中使用的变量和方法
return {
count,
increment
};
}
};
</script><template>
<div>
<p>Name: {{ state.name }}</p>
<p>Age: {{ state.age }}</p>
<button @click="increaseAge">Increase Age</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
// 使用 reactive 创建一个响应式对象
const state = reactive({
name: 'Alice',
age: 25
});
// 定义一个方法来增加 age 的值
const increaseAge = () => {
state.age++;
};
// 返回需要在模板中使用的变量和方法
return {
state,
increaseAge
};
}
};
</script>在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在setup函数中，我们定义了一个increment方法，用于在按钮点击时增加count的值。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。state对象本身就是一个响应式数据结构，我们可以直接访问其属性，而不需要额外的.value前缀。在setup函数中，我们还定义了一个increaseAge方法，用于在按钮点击时增加state.age的值。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。
这些示例展示了如何在Vue 3的setup函数中使用ref和reactive来创建和管理响应式数据。
ref和reactive在Vue 3中各有其特点，选择使用哪种方式取决于数据的类型和具体的使用场景。在大多数情况下，可以根据数据的特点来选择使用reactive还是ref。
以上为个人经验，希望对您有所帮助。