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

解决方案

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

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

常规写法:

  1. <template>
  2.   <div>
  3.     <button @click="decrease"> -1 </button>
  4.     {{count}}
  5.     <button @click="increase"> +1 </button>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   data() {
  12.     return {
  13.       count: 1
  14.     }
  15.   },
  16.   watch: {
  17.     count(newValue) {
  18.       this.report(newValue)
  19.     }
  20.   },
  21.   methods: {
  22.     increase() {
  23.       this.count++
  24.     },
  25.     decrease() {
  26.       this.count--
  27.     },
  28.     report(count) {
  29.       console.log(`report num: ${count}`)
  30.     }
  31.   }
  32. }
  33. </script>

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

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

  1. <script setup>
  2. import {ref, watch} from 'vue'
  3. const count = ref(1)
  5. const setCount = (value) => {
  6.   count.value = value
  7. }
  9. const increase = () => setCount(count.value + 1)
  10. const decrease = () => setCount(count.value - 1)
  11. const report = count => console.log(`report num: ${count}`)
  13. watch(count, newValue => report(newValue))
  14. </script>

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

  1. import {ref, watch} from 'vue'
  3. export default function useCount(initValue = 1, onChange) {
  4. const count = ref(initValue)
  6. const setCount = (value) => {
  7.   count.value = value
  8. }
  10. watch(count, newValue => onChange(newValue))
  12. const increase = () => setCount(count.value + 1)
  13. const decrease = () => setCount(count.value - 1)
  15. return {
  16.   count,
  17.   increase,
  18.   decrease
  19. }

使用:

  1. <script setup>
  2. import useCount from './use-count'
  3. const report = count => console.log(`report num: ${count}`)
  4. const {count, increase, decrease} = useCount(1, report)
  5. </script>

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

参考文档