Composition API 中 ref 和 reactive 的用法和原理

响应式编程：Vue.js 中的 ref 和 reactive

在构建交互式用户界面的过程中，我们需要处理数据并随着时间的推移对其进行更新。响应式编程是一种有效的方法，它允许我们创建能够自动响应数据变化的应用程序。在这篇文章中，我们将深入探讨 Vue.js 中的两个响应式工具：ref 和 reactive，并了解它们的区别和用法。

ref：响应式引用

ref 函数允许我们创建响应式引用，该引用可以指向基本数据类型（如字符串、数字、布尔值等）或复杂数据类型（如对象、数组等）。ref 创建的引用可以使我们直接在模板中进行数据绑定，而无需额外的处理。

const count = ref(0);

reactive：响应式对象和数组

reactive 函数允许我们创建响应式对象或数组。不同于 ref，reactive 只能处理复杂的数据类型。它将对象或数组的每个属性和项转换为响应式代理，当属性或项发生变化时，将触发更新。

const person = reactive({
  name: 'John Doe',
  age: 30
});

ref 和 reactive 的异同

• 指向的数据类型： ref 可以指向基本数据类型和复杂数据类型，而 reactive 只能指向复杂数据类型。
• 模板绑定： ref 可以用于在模板中直接绑定数据，而 reactive 不支持此功能。
• 组件传递： ref 可以用于在组件之间传递数据，而 reactive 则不可以。
• 监听数据变化： ref 和 reactive 都可以通过 watch 函数监听数据变化。

什么时候使用 ref 和 reactive？

• ref： 当我们需要处理基本数据类型或在模板中直接绑定数据时。
• reactive： 当我们需要处理复杂数据类型（如对象、数组）并监听其内部属性的变化时。

代码示例

在以下代码示例中，我们使用 ref 和 reactive 来实现一个响应式计数器：

<template>
  <div>
    <button @click="incrementCount">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 创建响应式计数器
    const count = ref(0);

    // 使用 reactive 创建响应式对象来处理其他数据
    const data = reactive({
      message: 'Hello World!'
    });

    const incrementCount = () => {
      count.value++;
    };

    return {
      count,
      data,
      incrementCount
    };
  }
};
</script>

常见问题解答

1. ref 和 reactive 是同一个东西吗？

   • 否，它们是不同的工具，用于处理不同类型的响应式数据。

2. 什么时候应该优先使用 ref 而非 reactive？

   • 当需要处理基本数据类型或在模板中直接绑定数据时，应使用 ref。

3. reactive 可以在模板中使用吗？

   • 不，reactive 无法直接在模板中使用，因为它无法进行数据绑定。

4. ref 可以用于监听对象或数组的属性变化吗？

   • 不，ref 只能监听基本数据类型的变化，无法监听复杂数据类型的属性变化。

5. reactive 创建的代理是否可以嵌套？

   • 是的，reactive 创建的代理可以嵌套，这意味着对象和数组可以包含其他响应式对象和数组。