Vue3 除了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 实战教程。

• 回复 数据结构算法，获取数据结构算法教程。

• 回复 架构师，获取 架构师学习资源教程。

• 更多教程资源应有尽有，欢迎 关注获取。