15 分钟掌握vue-next函数式api(小结)

生命周期

每一个 vue2 中的组件生命周期函数，当前都对应一个生命周期 hook，比如：

import { onMounted, onUpdated, onUnmounted } from "vue";
setup() {
 onMounted(() => { ... });
 onUpdated(() => { ... });
 onUnmounted(() => { ... });
}

这里值得注意的一点在于，对于 beforeCreate 和 created 生命周期，虽然有响应的 hook，但是我觉的没有必要单独使用了，因为这些逻辑代码大部分是一些初始化逻辑的代码，直接写在 setup 方法中即可。

如何复用代码

在这个基础上，复用代码的方式也不再像 vue2 中的那样，通过 mixin 或者 HOC 来达到复用代码的目的，这里稍微说一下，这些复用代码方式中比较显著的缺点有：

隐藏了数据来源，主要体现在 mixin 中
会牺牲一些性能，主要体现在 HOC 中
可能会遇到命名冲突问题，主要体现在 mixin 中

在 vue-next 中，复用代码的逻辑本质上是利用这些 hook 来拆分业务逻辑与状态，如果你比较熟悉 react hooks 的话，应该很快就能明白我指的是什么意思。如果我们将逻辑都写在 setup 方法中，很快代码就会变得难以维护，在这方面，我们可以将一些耦合在一起的代码抽离出来，同时以 use 前缀命名，声明一个自定义的 hook，如下：

export default {
 setup() {
  const data = useSearch()
  const { sortedData, sort } = useSorting(data)
  return { data, sortedData, sort }
 }
}
function useSearch() {
  ...fetch data
}
function useSort(data) {
  ...sort data
}

除了以 inline 的方式来声明，还可以将这些自定义的 hook 声明在单独的文件中，直接通过 import 导入即可，比如：

import useSearch from '@hooks/search'
import useSort from '@hooks/sort'

与 react hooks 对比

vue-next 在这方面借鉴了 react hooks 的设计思想，但是从实现层来讲，它们是不一样的，主要有以下几点：

vue-next 不依赖于其调用顺序，而 react 依赖
vue-next 提供了生命周期方法，而 react 刻意模糊生命周期的概念
vue-next 基于响应式系统实现，意味它的依赖不需要显示声明（而且是自动的），而 react 需要手动声明依赖数组