请慎用 Ref、Reactive！

点击下方“前端开发爱好者”，选择“设为星标”

第一时间关注技术干货！

哈喽，大家好我是 xy👨🏻‍💻。使用 Vue3，如果你只会使用 Ref、Reactive，那你真的就该 Out 了！！！

前言

最近团队的工作相对较少，我决定利用闲暇时间对代码进行审查和优化。

在此过程中，我发现了一个令我惊讶的现象：在项目中 99% 的响应式变量声明都使用了 Ref 或 Reactive。

虽然这两个 API 在大多数场景下都能满足需求，但在某些特定场景下，它们可能并非最佳选择。

为了提升代码质量和性能，我们可以针对这些特殊场景进行优化。

优化场景

比如：在处理庞大数据集或嵌套对象时，我们往往只需对特定属性进行响应式处理，而无需将整个对象转换为响应式。

这个时候如果你死磕 Ref、Reactive 虽然也能实现功能，但是会触发大量不必要的响应式转换和更新，试想一下，如果数据量足够的庞大，势必会造成很大的性能开销问题。

为了解决这个问题，向大家推荐 Vue3 中的两个实用 API：shallowRef 和 shallowReactive。

这两个方法在处理响应式数据时，为我们提供了更好的灵活性和性能。

在 Vue3 中，shallowRef 和 shallowReactive 是两个非常有用的方法，它们帮助我们在处理响应式数据时更加灵活和高效

shallowRef：

用于创建一个只追踪引用的响应式引用。

当你只需要对一个对象的某个属性进行响应式处理时，shallowRef 是一个很好的选择。

这样，Vue3 只会追踪该属性的变化，而不对整个对象进行深度响应式处理，从而降低性能开销。

shallowReactive：

与 shallowRef 类似，但适用于对象。

当你需要对一个大对象的某个属性进行响应式处理时，可以使用 shallowReactive。

这可以确保 Vue3 只对该属性进行响应式追踪，而不影响整个对象。

通过使用 shallowRef 和 shallowReactive，我们可以在处理大量数据或嵌套对象时，实现更加高效且灵活的响应式处理，从而提高应用程序的性能。

shallowRef 使用场景

shallowRef 是一个创建响应式对象的函数，与 ref 不同之处在于，shallowRef 只会在对象的外层进行响应式处理（只有对 .value 的访问是响应式的）。这意味着当对象的深层属性发生变化时，不会触发视图更新，从而提高了性能。

import { shallowRef } from 'vue';

const user = shallowRef({
  name: 'xy',
  address: {
    city: 'China',
    email: 'xxxxx@163.com'
  }
});

// 修改深层属性，不会触发视图更新
user.value.address.city = 'Japan';
// 修改深层属性，不会触发视图更新
user.value.name = '前端开发爱好者'

// 对 .value 的访问会触发试图更新
user.value = {
  name: '前端开发爱好者',
  address: {
    city: 'China',
    email: 'xxxxx@163.com'
  }
};

shallowReactive 使用场景

与 shallowRef 类似，shallowReactive 用于创建一个浅层响应式的对象。与 reactive 不同，shallowReactive 只会对对象的第一层属性进行响应式处理，不会递归地将对象内部的属性都变成响应式。

import { shallowReactive } from 'vue';

const user = shallowReactive({
  name: 'xy',
  address: {
    city: 'China',
    email: 'xxxxx@163.com'
  }
});

// 修改深层属性，不会触发视图更新
user.address.city = 'Japan';

// 修改浅层属性，会触发视图更新
user.name = '前端开发爱好者'

优势

性能优化：在处理大型数据集或嵌套对象时，运用 shallowRef 类似，shallowReactive 可有效提升性能，防止不必要的响应式转换及更新操作。
避免无限循环：当数据模型存在相互引用关系时，shallowRef 类似，shallowReactive 能助你规避创建无限循环的响应式数据结构。
更精细的控制：若只需关注对象的第一层属性，并避免触发深层次更新，shallowRef 类似，shallowReactive 可提供更为精细的控制能力。

shallowRef 类似，shallowReactive 的性能优势在于避免了深层对象的递归侦听，进而降低了响应式系统触发的频率。这对大型项目和复杂数据结构而言极具价值。

深入了解它们的使用方法和性能优势，可让我们更好地运用 Vue3 的响应式系统。请始终牢记，在利用这些特性时，需根据具体场景平衡性能与开发便利性，确保代码保持简洁、易读及易于维护。

写在最后

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞 👍 或者 ➕关注 都是对我最大的支持。

欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【进阶学习】拉你进技术交流群

关注公众号后，在首页：

回复 面试题，获取最新大厂面试资料。
回复简历，获取 3200 套简历模板。
回复 React 实战，获取 React 最新实战教程。
回复 Vue 实战，获取 Vue 最新实战教程。
回复 ts，获取 TypeScript 精讲课程。
回复 vite，获取 Vite 精讲课程。
回复 uniapp，获取 uniapp 精讲课程。
回复 js 书籍，获取 js 进阶必看书籍。
回复 Node，获取 Nodejs+koa2 实战教程。
回复 数据结构算法，获取数据结构算法教程。
回复 架构师，获取架构师学习资源教程。
更多教程资源应有尽有，欢迎 关注获取。