文档动机章节
精读《Vue3.0 Function API》
Vue3 究竟好在哪里?

Vue2 的代码模式下存在的几个问题。

  1. 随着功能的增长，复杂组件的代码变得越来越难以维护。 尤其发生你去新接手别人的代码时。 根本原因是 Vue 的现有 API 通过「选项」组织代码，但是在大部分情况下，通过逻辑考虑来组织代码更有意义。
  2. 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制。
  3. 类型推断不够友好。

Hook 和 Mixin & HOC 对比

说到这里，还是不得不把官方对于「Mixin & HOC 模式」所带来的缺点整理一下。

  1. 渲染上下文中公开的属性的来源不清楚。 例如，当使用多个 mixin 读取组件的模板时，可能很难确定从哪个 mixin 注入了特定的属性。
  2. 命名空间冲突。 Mixins 可能会在属性和方法名称上发生冲突，而 HOC 可能会在预期的 prop 名称上发生冲突。
  3. 性能问题，HOC 和无渲染组件需要额外的有状态组件实例，这会降低性能。

而 「Hook」模式带来的好处则是：

  1. 暴露给模板的属性具有明确的来源，因为它们是从 Hook 函数返回的值。
  2. Hook 函数返回的值可以任意命名，因此不会发生名称空间冲突。
  3. 没有创建仅用于逻辑重用的不必要的组件实例。

React Hook 和 Vue Hook 对比

其实 React Hook 的限制非常多，比如官方文档中就专门有一个**章节**介绍它的限制：

  1. 不要在循环，条件或嵌套函数中调用 Hook
  2. 确保总是在你的 React 函数的最顶层调用他们。
  3. 遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

而 Vue 带来的不同在于：

  1. 与 React Hooks 相同级别的逻辑组合功能，但有一些重要的区别。 与 React Hook 不同，setup 函数仅被调用一次，这在性能上比较占优。

  2. 对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。

  3. 不必考虑几乎总是需要 useCallback 的问题，以防止传递函数prop给子组件的引用变化，导致无必要的重新渲染。

  4. React Hook 有臭名昭著的闭包陷阱问题（甚至成了一道热门面试题，omg），如果用户忘记传递正确的依赖项数组，useEffect 和 useMemo 可能会捕获过时的变量，这不受此问题的影响。 Vue 的自动依赖关系跟踪确保观察者和计算值始终正确无误。

  5. 不得不提一句，React Hook 里的「依赖」是需要你去手动声明的，而且官方提供了一个 eslint 插件，这个插件虽然大部分时候挺有用的，但是有时候也特别烦人，需要你手动加一行丑陋的注释去关闭它。