Vue3中shallowRef和ref区别
在 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来达到目的。
原文地址：https://blog.csdn.net/JackieDYH/article/details/142054980
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！