Vue 官方发布了八个提升 Vue3 开发幸福感的小技巧

发布时间：2025-08-21 10:32

发现生活中的小确幸，提升幸福感 #生活乐趣# #生活态度# #趣味探索#

大家可能熟悉 Pinia，它的底层原理就是基于 effectScope 实现的。effectScope 让我们能够有效地管理全局或局部的状态，而 Vueuse 中的 createGlobalState 也是基于此技术开发的。

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

最近 Vue School 发布了在 Vue 开发中能够提高开发者幸福感的十个技巧，大家一起来看看吧~

1、Composition API + script setup

使用过 Vue3 Composition API 的开发者都知道它有多么方便，相比 Vue2 的 Option API，开发体验得到了显著提升。如果再结合 script setup，你会发现 Vue 开发变得更加高效和简洁。

图片

2、toRefs 响应式解构

在组件中接收 props 时，如果直接进行解构操作，是不会保留响应式的。

因此，使用 toRefs 来解构 props 会更好，这样每个解构出的属性都会变成一个 Ref，保持响应式特性。

图片

3、Hooks 的封装

为了提高代码的可复用性，可以将常用的 API 封装成一个函数。这样不仅方便维护，也能让代码更加模块化。

图片

4、watchEffect

watchEffect 与 watch 相比，能自动收集依赖并监听响应式的变化。它更加灵活，适用于大部分需要监测响应式数据的场景。

图片

5、provide + inject

当开发的组件结构较为复杂，层级较深时，使用 props 来传递数据可能会变得麻烦。这时，provide 和 inject 是一个非常好的解决方案，用来进行跨层级的数据传递。

图片

6、shallowRef

当你有大规模的数据集（如数组或对象）时，如果你只关心浅层的响应式变化，可以使用 shallowRef。这样可以提升性能，因为它只监听对象或数组的浅层变化，而不对深层进行监控。

图片

7、defineExpose

如果你需要在父组件中调用子组件的方法，可以使用 defineExpose 来暴露组件内的方法，让外部能够方便地访问和调用。

图片

8、effectScope 全局状态管理

图片