Ref 和 Reactive 的用法

在 Vue 3 中，Ref 和 Reactive 是响应式系统的核心功能，它们用于管理和跟踪数据变化，从而实现高效的 UI 更新。

1. Ref

Ref 是 Vue 3 中用于创建响应式引用的一个工具。它通常用于基础类型的数据（如 string、number、boolean）或在 Vue 模板之外需要引用的对象。Ref 包装的值是响应式的，Vue 会在这个值发生变化时触发视图更新。

使用场景

• 用于普通值（基础数据类型）和不可变数据的响应式。
• 用于模板中引用 DOM 元素或组件实例。

基本用法

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用

// 访问和修改数据
console.log(count.value);  // 获取值
count.value = 1;  // 修改值

• ref 返回一个包含 .value 属性的对象，你通过 .value 来访问或修改值。
• 在模板中，Vue 会自动解包 ref（即无需使用 .value，直接使用变量）。

用于模板的例子

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

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

const count = ref(0);

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

2. Reactive

Reactive 用于创建响应式对象，主要用于处理复杂的数据结构，如对象和数组。与 ref 不同，reactive 创建的对象不需要使用 .value 来访问属性，直接访问即可。

使用场景

• 用于对象、数组或其他引用类型的数据。
• 管理包含多个值或深层嵌套的数据结构。

基本用法

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});

// 直接访问或修改数据
console.log(state.count);  // 获取值
state.count = 1;  // 修改值

• 通过 reactive 创建的对象会自动成为响应式，无需 .value。
• Vue 会深度观察对象内的嵌套结构，确保所有属性都是响应式的。

用于模板的例子

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

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

const state = reactive({
  count: 0
});

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

区别

特性	Ref	Reactive
数据类型	基础类型（如 string、number 等）或引用类型	主要用于对象、数组等复杂数据结构
访问数据方式	.value（访问和修改数据）	直接访问和修改数据
用途	适用于单个值或 DOM 引用	适用于对象和数组等复杂数据结构

总结

• Ref 用于响应式单一值，适用于基础类型或 DOM 引用。
• Reactive 用于响应式对象或数组，适合管理复杂数据结构。