Vue.js 响应式引用与响应式数据（`ref` 和 `reactive`）

Vue.js 响应式引用与响应式数据（ref 和 reactive）

今天我们来聊聊 Vue 3 中的两个核心概念：ref 和 reactive。如果你对如何在 Vue 3 中创建响应式数据感到困惑，那么这篇文章将为你解答。

ref 和 reactive 的区别

在 Vue 3 中，ref 和 reactive 都用于创建响应式数据，但它们有不同的适用场景和使用方式。

1. 数据类型
   • ref：适用于基本数据类型（如字符串、数字、布尔值等），也可用于包装复杂对象。
   • reactive：主要用于复杂的对象和嵌套的数据结构。
2. 访问方式
   • ref ：需要通过 .value 属性访问和修改。
   • reactive ：可以直接通过对象属性进行访问和修改，无需额外的 .value。
3. 响应式追踪机制
   • ref ：每个 ref 包装对象都有一个独立的依赖收集。
   • reactive：整个对象作为一个整体进行依赖收集，内部属性的变化也能被追踪。
4. 可变性
   • ref：引用的值可以重新赋值。
   • reactive：对象本身是不可重新赋值的，只能修改其内部属性。
5. 使用场景
   • ref：适合单一数据项，或者需要在模板中解构时保留响应性。
   • reactive：适合复杂的状态管理，包括嵌套对象和数组。

示例对比

ref 示例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};
</script>

在上述示例中，count 是一个使用 ref 创建的响应式变量。在模板中，Vue 会自动解包 .value，因此可以直接使用 count。

reactive 示例：

<template>
  <div>
    <p>{{ state.count }}</p>
    <p>{{ state.message }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3',
    });
    const increment = () => {
      state.count++;
    };
    return {
      state,
      increment,
    };
  },
};
</script>

在这个示例中，state 是一个使用 reactive 创建的响应式对象。在模板中，可以直接访问 state 的属性，无需使用 .value。

选择 ref 还是 reactive？

一般来说，如果你处理的是基本数据类型，或者需要重新赋值的对象，ref 是一个更好的选择。而对于包含多个属性的复杂对象，reactive 更为适合。需要注意的是，reactive 只能用于对象，而 ref 可以用于任何类型的数据。

总结
ref 和 reactive 是 Vue 3 中管理响应式数据的两种主要方式。根据数据类型和使用场景选择合适的方式，可以提高开发效率和代码可维护性。