前端Vue篇之Vue3响应式：Ref和Reactive

在 Vue 3 中，响应式系统是一个核心特性，它使得我们能够非常方便地追踪和处理状态的变化。在 Vue 3 中，引入了两个主要的API来创建响应式数据：ref 和 reactive。这篇文章将详细介绍这两个 API 的使用及其区别，同时提供一些代码示例。

1. ref API

ref 用于创建基本数据类型的响应式引用。它可以将基本类型（如字符串、数字、布尔值等）包装成响应式对象。在使用 ref 时，你需要通过 .value 属性来获取或设置值。这是因为 Vue 需要在其内部对数据进行追踪，因此采用了加上 .value 的方式来获取实际值。

使用示例

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

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

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

    // 定义增加计数的函数
    const increment = () => {
      count.value++;
    };

    return { count, increment };
  }
}
</script>

在这个例子中，我们使用 ref(0) 创建了一个响应式的计数器 count。每当我们点击按钮时，increment 函数会被调用，更新 count 的值。在模板中，我们通过双花括号 {{ count }} 自动更新 UI。

2. reactive API

reactive 用于创建对象的响应式引用。当我们需要对一个复杂类型（如对象或数组）进行响应式处理时，reactive 是更合适的选择。与 ref 的 .value 不同，使用 reactive 创建的对象可以直接访问其属性，而不需要加上 .value。

使用示例

<template>
  <div>
    <p>名字: {{ user.name }}</p>
    <p>年龄: {{ user.age }}</p>
    <button @click="birthday">过生日</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 reactive 创建响应式对象
    const user = reactive({
      name: '张三',
      age: 25
    });

    // 定义过生日的函数
    const birthday = () => {
      user.age++;
    };

    return { user, birthday };
  }
}
</script>

在这个例子中，我们使用 reactive 创建了一个响应式对象 user。通过直接访问 user.name 和 user.age，我们可以方便地获取和更新用户的信息。点击“过生日”按钮后，会调用 birthday 函数使得年龄自动加一，界面也会随之更新。

3. ref 与 reactive 的区别

• 使用场景：ref 适合用于基本数据类型，reactive 用于对象和数组。
• 访问方式：使用 ref 时需要通过 .value 属性访问值，而使用 reactive 时直接访问对象属性。
• 响应式变更：在 reactive 中，如果直接替换整个对象（例如，user = { name: '李四', age: 30 }），则这个变更不会被追踪，需使用 Object.assign 或者其他方法来确保响应性。

结论

Vue 3 的 ref 和 reactive 提供了强大的响应式能力，让我们能够更方便地管理和更新状态。熟练掌握这两个 API 对于使用 Vue 3 开发应用至关重要。希望本文的介绍和示例能帮助你更好地理解和使用 Vue 3 的响应式特性。