shallowRef
是 Vue 3 提供的一个数据引用函数,用于创建一个 ref 对象,但与普通的 ref
不同,shallowRef
仅在外部层次(浅层次)观察对象的变化,而不会递归观察对象内部的属性的变化。
这意味着,如果你将一个复杂的对象传递给 shallowRef
,只有对象本身的引用变化时,shallowRef
才会触发更新,而不会深入到对象内部属性的变化。这可以在某些情况下提高性能,并减少不必要的更新。
以下是一个示例,说明了 shallowRef
的使用:
import { shallowRef } from 'vue';
const person = {
name: 'John',
age: 30,
};
const shallowPerson = shallowRef(person);
console.log(shallowPerson.value); // { name: 'John', age: 30 }
// 此时更新对象属性
shallowPerson.value.name = 'Alice';
console.log(shallowPerson.value); // { name: 'Alice', age: 30 }
// 但是如果替换整个对象,而不是更新属性,仍然会触发更新
shallowPerson.value = {
name: 'Bob',
age: 25,
};
console.log(shallowPerson.value); // { name: 'Bob', age: 25 }
注意,在上述示例中,当直接替换整个对象时,shallowRef
仍会触发更新,但如果只是更新对象内部属性,不会触发更新。这在某些情况下可以帮助优化性能,特别是当你处理大型对象时,不希望每次属性变化都触发组件的重新渲染。