Vue 3 中 ref 和 reactive 的深度绑定特性在 Vue 3 中-CFANZ编程社区

Vue 3 中 ref 和 reactive 的深度绑定特性在 Vue 3 中

在 Vue 3 中，ref 和 reactive 是用于创建响应式 state 的两种不同方法，它们各自具有深度绑定特性，但适用的场景和用法稍有不同。

1. `ref`

ref 用于创建基本数据类型的响应式引用，或者需要保持单个值的地方（例如：数字、字符串、布尔值等）。使用 ref 时，可以轻松地实现深度绑定，尤其是在需要对深层数据结构进行访问和操作的情况下。

示例：

import { ref } from 'vue';

const count = ref(0);  // 基础数据类型

function increment() {
    count.value++;  // 通过 .value 访问和修改
}

如果你将一个对象放入 ref 中，虽然 ref 本身只会保持对这个对象的引用，但是这个对象的属性是响应式的。

const user = ref({ name: 'Alice', age: 25 });

function updateName(newName) {
    user.value.name = newName;  // 响应式更新
}

2. `reactive`

reactive 是用于创建响应式对象的更优雅的方法。它直接把一个对象变成响应式的，并且适用于复杂对象和嵌套结构。reactive 将会追踪这个对象中所有深层次的属性，所以它非常适合用在要处理复杂数据结构的场景。

示例：

import { reactive } from 'vue';

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

function increment() {
    state.count++;  // 直接操作响应式对象
}

function updateName(newName) {
    state.user.name = newName;  // 深度响应式更新
}