在 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'; // 触发响应式更新
在这个例子中,
ref
使得user
对象内的name
属性更改时能够触发响应式更新,而shallowRef
则不会。不过,如果你确实需要让shallowRef
包装的对象内部也是响应式的,可以结合使用reactive
来达到目的。