Vue3 shallowRef与shallowReactive有何区别与用法详解？

本文共计1000个文字，预计阅读时间需要4分钟。

目录 + shallowRef 和 shallowReactive 使用 + shallowReactive 的非深度监听 + 如何说呢，其实这两个函数并不常用，在基本开发中基本用不到，但我还是想写写。

shallowRef 和 shallowReactive 是 Vue 3 中用于响应式数据处理的函数，它们允许你创建响应式对象，但不深度监听其内部属性的变化。

使用 shallowReactive 时，你不需要担心内部属性的变化会触发视图更新，这对于避免不必要的性能开销是有帮助的。以下是一个简单的示例：

javascriptimport { shallowReactive } from 'vue';

const data=shallowReactive({ name: 'Vue', details: { description: 'A progressive JavaScript framework' }});

console.log(data.name); // Vueconsole.log(data.details); // { description: 'A progressive JavaScript framework' }

在这个例子中，`details` 对象的变化不会触发视图的更新，因为它没有被深度监听。