新手必看：Vue 3组合式代码规范 | 7分钟学会

▌ 技术引导 如果你刚接触Vue 3组合式API，我建议直接上手使用`setup()`函数和`reactive()`、`ref()`这两个核心函数。别再纠结于选项式写法，那玩意儿已经过时了。在实战中，我看到很多新手把`reactive`和`ref`混淆，导致数据更新失效。记住，`reactive`用于对象，`ref`用于基本类型，用法上还有一点差异，`ref`需要通过`.value`访问值，而`reactive`直接访问属性。如果你想在组件中使用计算属性，`computed()`是必须的，它和`watch()`搭配使用是最常见的场景。 写组件的时候，不要把逻辑和模板混在一起，把逻辑抽离到`setup()`函数里，用`defineProps()`和`defineEmits()`定义props和事件。这样组件结构更清晰，也方便后续维护。另外，组件中的数据不要随便暴露出来，用`toRefs()`把`reactive`对象转换成响应式引用，这样在模板中可以直接使用，避免出现`Cannot read property...`这类错误。如果你需要在组件之外访问数据，记得用`expose()`显式暴露，否则会报`expose is not defined`的警告。 在使用生命周期钩子时，尽量避免在`onMounted()`里直接执行耗时操作。记得配合`onBeforeMount()`进行预加载，或者用`async/await`在`onMounted()`里处理异步逻辑。如果你用的是Vue 3 + TypeScript，建议用`defineComponent()`来定义组件，这样TypeScript才能正确识别props和emits。还有就是组件通信，如果父子组件之间需要频繁传递数据，推荐用`provide()`和`inject()`，而不是每次都传props，别被某些资料误导，那玩意儿用得多了会变成大漏斗。 总之，Vue 3组合式API的核心是响应式数据和逻辑抽离，掌握好`reactive`、`ref`、`computed`、`watch`这几个工具，就能写出结构清晰、易于维护的代码。别怕犯错，多试几次，踩过坑之后你就会知道哪些地方容易出问题。比如，使用`ref`时忘记加`.value`，或者在`setup()`里误用了`this`，这些都会让代码变得异常难调试。 ▌ 技术参考 一 技术背景与核心概念 Vue 3组合式API是为了提高代码复用性和可读性而设计的。它通过`setup()`函数将逻辑与模板分离，允许开发者使用`reactive()`、`ref()`、`computed()`等函数来管理状态。这些函数分别用于创建响应式对象、响应式基础变量、计算属性和响应式监听。相比选项式API，组合式API更强调函数式的写法，使得组件逻辑更清晰，也更容易被测试。在实际项目中，组合式API已经成为主流，尤其适合大型项目，能有效减少组件间的耦合。 二 具体操作方法或配置步骤 创建一个响应式对象需要调用`reactive()`函数，例如`const state = reactive({ count: 0 })`。创建响应式基础变量要使用`ref()`，例如`const count = ref(0)`。记住，`ref`的值要通过`.value`访问，否则会得到`undefined`。如果要在模板中使用这些变量，需要在`setup()`函数中返回它们，例如`return { count }`。Vue 3还支持`defineProps()`和`defineEmits()`，它们是组合式API中定义props和emits的函数，使用时要配合`defineComponent()`，这样TypeScript才能正确识别类型。 三 常见踩坑场景与避坑方案 使用`reactive`时，如果在组件中修改了对象属性，但没有触发视图更新，那是因为Vue 3对响应式对象的处理是浅层的，不能自动追踪嵌套对象的属性变化。解决方案是用`toRefs()`将对象转换为响应式引用，或使用`reactive()`配合`ref()`来处理嵌套结构。如果误用了`this`，比如在`setup()`函数里调用`this.count`，会抛出`Cannot read property...`的错误。解决办法是通过返回变量的方式，或者使用`defineExpose()`暴露部分属性，避免出现`this`访问失败的情况。 四 性能影响或效率对比 Vue 3的组合式API在性能上和选项式API几乎没有差异，但它的结构更清晰，有助于优化代码逻辑。使用`computed()`可以避免重复计算，它比`watch()`更轻量，适合处理依赖数据变化的简单场景。而`watch()`更适合处理复杂逻辑，比如当某个数据变化时需要执行异步操作。如果在`onMounted()`里直接调用大量DOM操作，会影响性能，建议将这些操作移到`onBeforeMount()`中，或者使用`nextTick()`来延迟执行。对于大型应用，组合式API还能提高组件的可复用性，使得代码更易于管理和扩展。 五 适用场景与局限性 组合式API最适合构建中大型项目，尤其是组件逻辑复杂、需要复用的场景。比如，在表单组件中，可以将表单验证逻辑抽离到一个自定义函数里，然后在多个组件中复用。但是，对于简单的小型组件，使用组合式API反而会增加代码复杂度。如果组件需要频繁地接收props传递数据，使用组合式API可能会让代码变得臃肿，这时候还是选项式API更直接。此外，组合式API的学习成本较高，需要理解响应式系统和函数式编程的思维模式，新手在初期可能会因为不熟悉而写出难以维护的代码。 六 替代方案或进阶技巧 如果你不想用组合式API，还可以使用Vue 3的选项式API，它更适合小型项目或不熟悉函数式编程的开发者。但在大型项目中，组合式API的优势更明显，因为它可以将逻辑模块化，比如将表单逻辑封装到一个函数里，再通过`setup()`调用。另外，可以使用Vue 3的`shallowReactive()`和`shallowRef()`来减少响应式代理的开销，它们不会递归地将对象属性转化为响应式，适合处理大型对象或不想让属性变化触发视图更新的情况。对于需要更精细控制响应式行为的场景，可以使用`markRaw()`来阻止某些对象被Vue的响应式系统代理。 七 在组件中使用计算属性的方式 在组件中使用计算属性，可以通过`computed()`函数来定义。例如：`const fullName = computed(() => `${firstName.value} ${lastName.value}`)`。这样，当`firstName`或`lastName`发生变化时，`fullName`会自动更新。`computed()`还可以接受一个选项对象，比如`computed(() => ... , { deep: true })`，这样即使对象内部属性变化，也能触发更新。不过，`deep: true`会增加性能开销，只有在必要时才使用。如果计算属性依赖多个响应式变量，记得用`watchEffect()`来监听它们的变化，而不是手动编写多个`watch()`。 八 怎么处理组件之间的数据传递 在组件之间传递数据，可以采用props和emits的方式，或者通过全局状态管理工具，比如Pinia。如果父子组件之间需要频繁传递数据，推荐使用`provide()`和`inject()`，它们能避免层层传递props的麻烦。例如：`provide('theme', 'dark')`和`inject('theme')`。但要注意，`provide()`和`inject()`只适合单向数据流，如果需要双向传递数据，还是用`v-model`更直接。在大型项目中，使用Vuex或者Pinia进行状态管理会更高效，特别是需要跨组件共享数据时，它们能提供更好的组织方式和调试体验。 九 在组件中使用生命周期钩子的注意事项 Vue 3的生命周期钩子函数是组合式API的一部分，比如`onMounted()`、`onBeforeUnmount()`等。在使用这些钩子时，要确保它们在`setup()`函数内部被调用，否则会丢失上下文。比如，`onMounted(() => { ... })`需要放在`setup()`里，否则无法访问组件实例。另外，如果在`onMounted()`里执行网络请求，记得加上`onBeforeMount()`进行预加载，这样能减少不必要的请求。如果需要取消请求，可以在`onBeforeUnmount()`里处理，比如用`AbortController`来取消`fetch`或`axios`请求。 十 如何避免组件内数据被意外修改 在组件内，避免数据被意外修改是关键。如果你在`setup()`函数中返回了`reactive`对象，那么在模板中直接修改它的属性会触发更新。但如果你想防止数据被修改，可以使用`readonly()`函数来创建一个只读的响应式对象，比如`const state = readonly({ count: 0 })`。这样，任何试图修改`state.count`的操作都会抛出错误。在使用`ref`时，如果想防止直接修改，可以将它包装成一个对象，例如`const count = ref(0)`，或者使用`shallowReadonly()`来减少代理开销。这些都是避免数据污染的有效手段。 十一 如何优化组件的渲染性能 优化组件渲染性能可以从多个方面入手。首先，使用`v-memo`指令来缓存组件，避免重复渲染。其次，在组件中减少不必要的响应式依赖，比如避免在`setup()`中每次都创建新的`ref`。另外，使用`watch()`时，设置`immediate: false`可以延迟第一次执行，避免不必要的初始化操作。对于高频更新的数据，可以使用`watchEffect()`来监听变化，而不是`watch()`，这样能提高响应速度。还可以通过`defineProps()`的`required`和`default`参数来优化props的传入方式，减少类型错误和冗余代码。 十二 如何处理组件间的通信问题 组件间的通信问题可以通过多种方式解决，比如使用props和emits、使用事件总线、使用Vuex或Pinia进行状态管理。如果是父子组件，推荐使用`props`和`emits`，它们是最直接的方式。如果是兄弟组件或者跨层级组件，可以使用事件总线，比如`mitt`库。它允许你创建一个全局事件系统，通过`$emit`和`$on`来实现组件间的通信。对于中大型项目，使用Pinia会更方便，它提供了state、getters和actions，适合处理复杂的业务逻辑。但要注意，事件总线不要滥用，否则会增加代码的耦合度，让调试变得困难。 十三 如何处理组件的销毁逻辑 处理组件销毁逻辑时，可以使用`onBeforeUnmount()`钩子。在这个钩子中，可以执行一些清理操作，比如取消定时器、移除事件监听器或销毁外部资源。比如，`onBeforeUnmount(() => { clearInterval(timer) })`。如果使用了`ref`或`reactive`创建的变量，记得在销毁时将其置空，以避免内存泄漏。此外，如果组件内部有第三方库依赖，比如`v-calendar`或`vue-chart`，也要在`onBeforeUnmount()`中调用它们的销毁方法，比如`chart.destroy()`。这些操作虽然简单，但对性能和稳定性有直接影响。 十四 组合式API的TypeScript支持方式 Vue 3的组合式API对TypeScript有良好的支持，使用`defineComponent()`可以定义组件的props和emits。例如：`defineComponent({ props: { count: { type: Number, required: true } }, emits: ['updateCount'] })`。如果使用`ref`，可以指定类型，比如`const count = ref(0)`。使用`computed()`时，也可以指定返回值类型，比如`const doubleCount = computed(() => count.value 2)`。这些类型声明能帮助开发者提前发现错误，提升代码的健壮性。此外，Vue 3还支持`defineExpose()`，可以暴露组件内部的变量和方法，方便父组件调用。 十五 如何调试组合式API的组件 调试组合式API组件时，可以使用Vue DevTools，它支持查看组件的响应式数据和生命周期钩子。如果组件内部有复杂的逻辑，建议在`setup()`函数中添加`console.log`来输出关键变量。此外，可以使用`defineProps()`的`required`和`default`参数来确保props的正确性。如果数据更新后没有触发视图变化，可以检查是否正确使用了`reactive()`或`ref()`，或者是否在模板中正确引用了变量。对于异步更新的问题，可以结合`nextTick()`来确保DOM已经更新完毕，再进行后续操作。这些都是常见的调试技巧，帮助你快速定位问题。