在 Vue 3 的世界中，响应式数据绑定是其核心特性之一，它让开发者能够轻松地实现数据与视图的同步更新。而在这背后，ref 和 reactive 这两个 API 起到了至关重要的作用。本文将通过实例探讨 ref 与 reactive 的区别和相同点，帮助正在入门 Vue 3 的你快速上手。

ref：基本数据类型的响应式绑定

ref 主要用于处理基本数据类型（如字符串、数字、布尔值等）以及需要单独包裹的复杂数据类型（如对象或数组）。通过 .value 属性，ref 能够创建一个响应式对象，该对象在其值发生变化时，能够自动触发视图的更新，以实现对数据变化的监听和响应。

import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

function decrement() {
  count.value--;
}

在模板中：

<p>{{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>

reactive：对象的深度响应式绑定

reactive 适用于处理整个对象的响应式需求。它通过对对象的所有属性进行代理，实现了对整个对象的深度响应式。这意味着，无论对象中的哪个属性发生变化，reactive 都能够捕捉到这一变化，并相应地更新视图。

import { reactive } from 'vue';

const state = reactive({
  name: 'Alice',
  age: 25
});

function updateState() {
  state.name = 'Bob';
  state.age += 1;
}

在模板中：

<p>Name: {{ state.name }}</p>
<p>Age: {{ state.age }}</p>
<button @click="updateState">Update State</button>

ref 与 reactive 的对比

• 使用场景：

  • ref 更适合处理基本数据类型和需要单独包裹的复杂数据类型。
  • reactive 更适合处理整个对象的响应式需求。

• 性能开销：

  • ref 在性能上相对较小，因为它不需要对对象的所有属性进行代理。
  • reactive 在性能上开销较大，特别是在处理大型对象或复杂数据结构时。

• 访问方式：

  • ref 的值需要通过 .value 属性访问。
  • reactive 的所有属性都是响应式的，可以直接访问。

实例解析

让我们通过一个实际的例子来理解 ref 和 reactive 的用法和区别。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <p>{{ state.name }} - {{ state.age }}</p>
    <button @click="updateState">Update State</button>
  </div>
</template>

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

const count = ref(0);
const state = reactive({
  name: 'Alice',
  age: 25
});

function increment() {
  count.value++;
}

function updateState() {
  state.name = 'Bob';
  state.age += 1;
}
</script>

在这个例子中，我们使用了 ref 来创建一个计数器，使用 reactive 来创建一个用户信息对象。通过按钮点击事件，我们可以看到计数器和用户信息的变化。

结语

ref 和 reactive 是 Vue 3 中实现响应式数据绑定的两种重要方式。理解它们的区别和用法，可以帮助你更好地掌握 Vue 3 的响应式系统，从而编写出更高效、更易于维护的代码。希望本文能帮助你快速上手 Vue 3，成为 Vue 开发领域的佼佼者！