Vue 中的响应式系统：ref 与 reactive

Vue 中的响应式系统：ref 与 reactive

在 Vue 3 中，响应式系统是其核心特性之一，它使得数据的变化能够自动更新到视图上。Vue 3 提供了多种创建响应式数据的方式，其中 ref 和 reactive 是最常用的两种。本文将深入探讨这两个函数的使用和区别，并结合实际代码示例进行讲解。

1. 静态数据与响应式数据的区别

在 Vue 中，并非所有的数据变化都能自动反映到视图上。让我们先看一个简单的例子：

<template>
  <div>
    <p>staticState.count is: {{ staticState.count }}</p>
    <button @click="staticStateIncrement">Increment</button>
  </div>
</template>

<script setup>
const staticState = {
  count: 0,
};
const staticStateIncrement = () => {
  staticState.count++;
  console.log(staticState.count);
};
</script>

在这个例子中，staticState 是一个普通的 JavaScript 对象，当我们点击按钮调用 staticStateIncrement 函数时，虽然 staticState.count 的值会增加，并且在控制台中可以看到更新后的值，但视图并不会更新。这是因为普通的 JavaScript 对象不具备响应式能力，Vue 无法自动追踪其变化。

2. reactive 函数

reactive 函数用于创建一个响应式对象。响应式对象的属性变化会自动更新到视图上。以下是使用 reactive 的示例：

<template>
  <div>
    <p>state.count is: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const state = reactive({
  count: 0,
});
const increment = () => {
  state.count++;
  console.log(state.count);
};
</script>

在这个例子中，我们使用 reactive 函数创建了一个响应式对象 state。当点击按钮调用 increment 函数时，state.count 的值会增加，并且视图会自动更新以显示新的值。这是因为 reactive 函数会将传入的对象转换为一个响应式代理，Vue 会自动追踪其属性的变化。

需要注意的是，reactive 只能用于对象和数组，不能用于基本数据类型（如 number, string, boolean 等）。

3. ref 函数

ref 函数用于创建一个响应式的引用，它可以用于基本数据类型和对象。以下是使用 ref 的示例：

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

<script setup>
import { ref } from "vue";

const count = ref(0);
const increment2 = () => {
  count.value++;
  console.log(count);
};
</script>

在这个例子中，我们使用 ref 函数创建了一个响应式引用 count，初始值为 0。当点击按钮调用 increment2 函数时，我们需要通过 count.value 来访问和修改其值。这是因为 ref 返回的是一个对象，其实际值存储在 value 属性中。与 reactive 一样，当 count.value 的值发生变化时，视图会自动更新。

4. ref 与 reactive 的区别

• 适用类型：reactive 适用于对象和数组，而 ref 可以用于基本数据类型和对象。
• 访问方式：使用 reactive 创建的响应式对象可以直接访问其属性，而使用 ref 创建的响应式引用需要通过 .value 来访问和修改其值。在模板中，Vue 会自动解包 ref，因此可以直接使用 {{ count }} 来显示其值。

总结

ref 和 reactive 是 Vue 3 中创建响应式数据的两种重要方式。reactive 适用于创建响应式对象和数组，而 ref 更适合处理基本数据类型和需要响应式引用的场景。通过合理使用这两个函数，我们可以轻松地实现数据的响应式更新，提升用户体验。