跳到主要内容

Vue.jsref 和 reactive

在 Vue.js 3 中，组合式 API 引入了 ref 和 reactive 两个核心函数，用于管理响应式数据。它们是构建动态和交互式应用的基础。本文将详细介绍这两个概念，并通过示例帮助你理解它们的用法和区别。

什么是响应式数据？​

响应式数据是 Vue.js 的核心特性之一。当数据发生变化时，Vue 会自动更新依赖该数据的视图部分。在组合式 API 中，ref 和 reactive 是创建响应式数据的两种主要方式。

ref​

ref 用于创建一个包含响应式数据的引用对象。它通常用于管理基本类型（如字符串、数字、布尔值）的响应式数据。

基本用法​

javascript
import { ref } from 'vue';

const count = ref(0); // 创建一个初始值为 0 的响应式引用
  • ref 返回一个对象，其值存储在 .value 属性中。
  • 在模板中，Vue 会自动解包 .value，因此可以直接使用 count 而不是 count.value。

示例​

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

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

const count = ref(0);

function increment() {
  count.value++; // 修改 ref 的值
}
</script>

输出：

  • 页面显示 Count: 0。
  • 点击按钮后，count 的值会增加，页面会自动更新。
提示

ref 适用于管理单个值或需要在多个地方引用的数据。

reactive​

reactive 用于创建一个响应式对象。它适用于管理复杂数据结构（如对象或数组）。

基本用法​

javascript
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue!'
});
  • reactive 返回一个响应式代理对象。
  • 可以直接访问和修改对象的属性。

示例​

javascript
<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Message: {{ state.message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const state = reactive({
  count: 0,
  message: 'Hello, Vue!'
});

function increment() {
  state.count++; // 修改 reactive 对象的属性
}
</script>

输出：

  • 页面显示 Count: 0 和 Message: Hello, Vue!。
  • 点击按钮后，count 的值会增加，页面会自动更新。
警告

reactive 只能用于对象或数组。如果尝试将其用于基本类型，Vue 会抛出警告。

ref 和 reactive 的区别​

特性refreactive
适用类型基本类型（如字符串、数字）对象或数组
访问方式通过 .value 访问直接访问属性
解包行为在模板中自动解包无需解包
适用场景单个值或简单数据复杂数据结构

实际应用场景​

场景 1：表单输入​

javascript
<template>
  <div>
    <input v-model="form.name" placeholder="Name" />
    <input v-model="form.email" placeholder="Email" />
    <button @click="submit">Submit</button>
  </div>
</template>

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

const form = reactive({
  name: '',
  email: ''
});

function submit() {
  console.log('Form submitted:', form);
}
</script>

场景 2：计数器组件​

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

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

总结​

  • ref 用于管理基本类型的响应式数据，通过 .value 访问。
  • reactive 用于管理对象或数组的响应式数据，直接访问属性。
  • 根据数据类型和场景选择合适的工具。

附加资源​

练习​

  1. 使用 ref 创建一个计数器组件。
  2. 使用 reactive 创建一个表单组件，包含 name 和 email 字段。
  3. 尝试将 ref 和 reactive 结合使用，管理一个包含多个字段的复杂状态。