Vue 官方教学：提升 Vue3 开发幸福感的 8 个小技巧

前言

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

1、Composition API + script setup

用过 Vue3 Composition API 的朋友想必都知道有多么方便，相比于 Vue2 Option API ，开发体验简直是提升得不止一点，如果再加上 script setup 的话，那你写起 Vue 来会更加快捷

2、toRefs 响应式解构

当你在组件中接收 props 的时候，如果只是简单的解构的话，是没有响应式的

所以可以使用 toRefs 来进行解构，这样解构出来的每一个属性都是一个 Ref

3、Hooks 的封装

为了可复用性，我们可以把一些复用到的 API 集合到一个函数里面去

4、watchEffect

watchEffect 相比于 watch，它能自动帮我们收集依赖进行监听响应式变化

5、provide + inject

当你在封装一些比较复杂的组件时，涉及到的组件层数会比较多的时候，使用 props 进行数据传递会比较麻烦，所以可以使用 provide + inject 来进行数据传递共享

6、shallowRef

当有大数据量的数组或者对象时，我们如果只需要监听浅层响应式变化的话，可以不需要使用 ref，而是使用 shallowRef，这样的话只会监听浅层变化，而不会监听深层变化，提升了性能

7、defineExpose

如果你想要在使用组件的页面中，去调用组件中的方法，可以使用 defineExpose 将组件内部的方法暴露出来，供外部使用

8、effectScope 全局状态管理

Pinia 相信大家都用过吧，它其实原理就是基于 effectScope 实现的， effectScope 可以用来做全局或者局部状态管理，Vueuse 中的状态管理 Hooks createGlobalState 也是基于 effectScope 实现的

结语

以上就是官方总结的8个小技巧，希望对你能所有帮助。

- END -

如果您关注前端+AI 相关领域可以扫码进群交流

添加小编微信进群😊

关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。