2020-10-03 记一次使用 Vue 3.0 组合式 api 的开发

最近用 composition-api 这个库在 Vue 2 中进行了一次组合式 api 的试验，这个库的用法和 Vue 3 中是一样的。

先来谈谈我个人的感受吧。

在使用 composition-api 的过程中，我最大的感受是要特别注意普通对象和响应式对象的区别，稍不注意就会混淆。所以在实际开发中一般使用 useXXX 的方式来给用组合式 api 编写的函数命名，例如

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

这样一来就能区分自己在编写的是普通的函数还是响应式对象函数。

之前的函数都是没有给参数的，实际上给参数的函数也是一样的写法。当然了，也同样要区分出普通对象和响应式对象。

/**
 * 保留数字到小数点
 *
 * @author CaoMeiYouRen
 * @date 2020-10-03
 * @export
 * @param {Ref<number>} num 要格式化的数字
 * @param {(Ref<number> | number)} [digits=ref(2)] 默认保留2位小数
 * @param {(Ref<boolean> | boolean)} [int=ref(false)] 如果是整数是否保留小数
 * @returns
 */
export function useNumberFormat(num: Ref<number>, digits: Ref<number> | number = 2, int: Ref<boolean> | boolean = false) {
    const numRef = computed(() => {
        if (isNaN(num.value)) {
            return 0
        }
        const _int = unwrap(int)
        if (_int && num.value % 1 === 0) {
            return num.value
        }
        const _digits = unwrap(digits)
        return Number(num.value.toFixed(_digits))
    })
    return numRef
}

另外，我认为 composition-api 最大的优势是可以抽离逻辑，可以实现逻辑复用。

也就是说，以往那种把数据获取和改变也放在 Vue 文件中的做法，可以改成把逻辑放到单独的 js、ts 文件中，而这有利于逻辑复用。同时可以将自己编写的逻辑打包上传到 npm，让更多的人一起使用。

当然了，由于目前只开发了比较简单业务逻辑，所以对于复杂业务逻辑，组合式 api 到底有多大作用还是不太了解，还有待后续的开发。

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/fa085284.html
版权声明：本文采用 CC BY-NC-SA 4.0 协议进行分发，转载请注明出处！