当前位置：首页 > article >正文

Vue3中shallowRef和ref区别

article 2024/9/22 22:32:56

在 Vue 3 中，ref 和 shallowRef 都是用来创建响应式引用的工具，但它们之间存在一些关键的区别，主要在于它们如何处理对象的响应式特性。

ref

ref 创建的是一个完整的响应式引用，它不仅使基础值成为响应式的，而且当值是一个对象时，它还会递归地将对象的所有属性变为响应式的。这意味着如果你有一个复杂的对象结构，使用 ref 将会使整个对象树都变成响应式的。

优点

对象内的所有层级都是响应式的。
更适合用于需要完整响应式支持的场景。

缺点

对于大型对象，可能会导致性能问题，因为 Vue 需要追踪对象内部所有的变化。
初始化时需要更多的时间来设置响应式属性。

shallowRef

shallowRef 创建了一个浅层响应式的引用。它只使引用的基础值成为响应式的，而不深入对象内部使其属性也变为响应式的。也就是说，当你使用 shallowRef 包装一个对象时，只有这个对象本身是响应式的，对象内部的属性不是响应式的。

优点

性能更好，尤其是在处理大型对象时，因为它不需要追踪对象内部的变化。
初始化速度更快，因为它不需要递归地设置对象的响应式属性。

缺点

对象内部的属性不是响应式的，这可能不适合某些需要深层响应式特性的场景。

使用场景

当你需要一个完整的响应式对象，包括它的所有属性和嵌套属性时，应该使用 ref。
当你只需要跟踪对象本身的引用变化，而不是对象内部属性的变化时，可以使用 shallowRef。

import { ref, shallowRef } from 'vue';

// 使用 ref
const user = ref({ name: 'Alice', age: 25 });
user.value.name = 'Bob'; // 触发响应式更新

// 使用 shallowRef
const userShallow = shallowRef({ name: 'Alice', age: 25 });
userShallow.value.name = 'Bob'; // 不触发响应式更新
userShallow.value = { name: 'Charlie', age: 30 }; // 触发响应式更新

// 如果需要使 shallowRef 内部的对象也具有响应式，可以使用 reactive
import { reactive } from 'vue';
const userShallowReactive = shallowRef(reactive({ name: 'Alice', age: 25 }));
userShallowReactive.value.name = 'Bob'; // 触发响应式更新