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，使用它们可以更好地管理和更新应用程序中的数据。
