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` 对象的变化不会触发视图的更新，因为它没有被深度监听。

总结一下，shallowRef 和 shallowReactive 在大多数情况下不是必需的，但了解它们的功能和适用场景是有益的。

目录

• shallowRef 和 shallowReactive
• 使用 shallowReactive 非深度监听
• 使用 shallowRef 非深度监听

嗯，怎么说呢，其实这两个函数并不是很常用，在开发过程中基本上用不到，但是呢，我不写我又感觉少点啥，所以说就简单的说一下吧，其实不看也可以哈。

shallowRef 和 shallowReactive

• shallowRef 函数，只处理基本类型数据。
• shallowReactive 函数，只处理第一层数据。
• 两个在使用的时候都需要引入才可以。

上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。

我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。

但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监听，啥意思呢？就是 reactive 包裹的对象，就算有100层，也就是连续点一百个属性那种，去修改最深层的数据，也是可以监听到的，这样的话就会存在问题了。

深度监听的问题：

• 无论 ref 函数还是 reactive 函数都是深度监听。
• 如果数据量过大，超级超级消耗性能。
• 如果我们不需要对数据进行深度监听的时候，就可以使用 shallowRef 函数和 shallowReactive 函数。

明白了吗？不明白没关系，我们通过几个案例就知道了。

使用 shallowReactive 非深度监听

记住一点，shallowReactive 函数，只能处理第一层数据。

假设我们页面有一个个人信息展示，有名字、有年龄需要展示，我们数据是存在 boy 对象里面，然后 age 是在 boy 对象的 news 属性下面，也就是深层，但是 name 是在 boy 对象下面，也就是第一层，我们有两个按钮，分别修改 name 和 age，看一下会有什么效果。

<template> <div> <h1>姓名：{{name}}</h1> <h1>年龄：{{news.age}}</h1> <button @click="btn">修改name</button> <button @click="btn2">修改age</button> </div> </template> <script> import { shallowReactive, toRefs } from "vue"; export default { name: "App", setup() { const boy = shallowReactive({ name: "我是