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