第 001 期 聚集零散业务代码的解决方案 - Vue 3 Composition API

用 Vue 时，常出现相关业务逻辑代码散在 data， methods， watch， computed 和 mounted 等地方。这样的代码可维护性差。查找或更改这块逻辑时，都要找多个地方。

解决方案

Vue 3 新出的 Composition API 可以优雅的聚集零散业务代码。 Composition API 通过 ref，reactive，watch，computed, onMounted 等这些可调用的函数，来聚集代码。

我们来看个 Demo。实现一个计数器，支持按加，减按钮来改数字，改数字时，要将新的值传给服务器端。

常规写法:

业务逻辑代码散在 data，watch 和 methods 里。

用 Composition API 写，可以将业务代码聚集在一处。Composition API 和 常规写法的 DOM 结构没有变化，只有 js 有变化。如下:

为了方便计数器逻辑的复用，可以抽象成一个函数：

使用:

代码是不是变得很内聚，用 Composition API 来重构零散的代码吧~

参考文档

• Composition API
• Vue3.0 新特性以及使用经验总结