2020-09-06 浅谈对 Vue 3.0 的一些看法

vue3 文档：https://v3.vuejs.org/

vue 3.0 代码地址：https://github.com/vuejs/vue-next

组合式 API 征求意见稿：https://composition-api.vuejs.org/zh/

vue2 实现版的组合式 api https://github.com/vuejs/composition-api

组合式 api 实现库 https://github.com/pikax/vue-composable

虽然在 vue3 正式推出前就有人说 vue3 采用的组合式 api 放弃了 vue2 配置式接口的便捷性，但我看了下 vue3 的文档，发现依旧推荐使用配置式的写法，而组合式 api 则被定性为高级功能，推荐老手使用。

作为一个写 vue 的菜鸟，如果让我来用 vue3 写项目，也一定会优先使用配置式的写法，无他，只是熟悉而已。

所以，即便升级到了 vue 3.0 版本，我想大部分人也还是用配置式的写法。

然后，我们再来看看 vue3.0 新出的组合式 api。

组合式 api 是一个对标 react hook 的东西，但是正如 vue 比 react 方便一样，vue 的组合式 api 也一样比 react hook 好用多了。在我看来， react hook 还不如使用 class 风格呢，心智负担一点也不比 class 风格小。而组合式 api 也正如文档所说，可以随意使用，无论是放在循环中还是判断语句中，都可以。并且所有的依赖都自动追踪，而这正是 vue 的最大特点。

在我看来，组合式 api 的最大意义是让 vue 的用户可以分享自己写的逻辑（函数）而不只是一个组件。

以官网的 useMousePosition 为例，如果是 vue2 的情况，那么如果有人想分享一个这么一段逻辑，那么他必须封装成一个组件，然后分享出来，同时还得写个文档说明参数。而在 vue3 中，可以将所有逻辑封装成一个函数。只要写完这个函数，就知道要传入什么参数，会返回什么参数了，如果偷懒一点还能不写文档了，而且用户还能看懂。

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 }
}

而第二个优点就是类型推断。

由于组合式 api 写出来的东西就是函数，所以可以完美的享受 TypeScript 带来的类型推断。

在 vue2 中，如果不翻看文档，或者直接看源码的话，是无法了解到底有什么配置项的。但在 vue3 中，通过函数式组件，可以轻易的实现参数和类型的说明。（即便是使用 JavaScript ，也会因此享受更好的类型推断）

暂时先想到了这么多，之后会用组合式 api 实践一下，看看效果如何。

后记：

之后发现一个有趣的库 https://github.com/pikax/vue-composable 。里面用组合式 api 设计了一些有趣的函数，可以说会极大的方便项目的开发。

后记 2：最后，我认为组合式 api （函数式组件）更适合逻辑层组件，而配置式的模板更适合视图层组件

后记 3：截止 2020-09-28 ，已经有以下几个 UI 框架支持 vue3.0 了，应该说推进的还是蛮快的（uni-app 的支持还未完善）。而我比较喜欢用的 Vuetify 虽然有 Vue 3.0 的支持计划，但是根据官网的开发计划，要到 2021 年的 Q3 才能发布，等到那时候真的是花都谢了……

Ant Design Vue

Vant

Element Plus

uni-app

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/c006a477.html
版权声明：转载请注明出处！