vue3ref和reactive

Vue 3中的ref和reactive是两个重要的响应式API。

ref用于将基本数据类型转换为响应式数据，它返回一个包含value属性的响应式对象。ref适合用于单个值的响应式需求，例如计数器、表单数据等。示例代码：

<template><div><p>Count: {{ count.value }}</p><button @click="count.value++">Increase</button></div>
</template><script>
import { reactive, ref } from 'vue';export default {setup() {const count = ref(0); // 创建一个响应式的计数器变量return {count // 将计数器变量暴露出去}}
}
</script>

reactive则用于将对象类型转换为响应式数据，可以实现对整个对象的监听和响应。reactive适合用于包含多个属性的响应式需求，例如Vuex中的store状态管理模式，以及复杂的表单数据等。示例代码：

<template><div><p>Message: {{ state.message }}</p><p>Age: {{ state.age }}</p><button @click="updateData">Update Data</button></div>
</template><script>
import { reactive } from 'vue';export default {setup() {const state = reactive({ // 创建一个响应式对象message: 'Hello World',age: 18,});const updateData = () => { // 更新响应式对象中的数据state.message = 'Hello Vue 3';state.age = 20;}return {state, // 将响应式对象暴露出去updateData,}}
}
</script>

总之，ref和reactive是Vue 3中非常重要的响应式API，使用它们可以更好地管理和更新应用程序中的数据。