本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue3.0 新特性 —— Composition API 与 React.js 中 Hooks 的异同点

a. React.js 中的 Hooks 基本使用

React Hooks 允许你 "勾入" 诸如组件状态和副作用处理等 React 功能中。Hooks 只能用在函数组件中，并允许我们在不需要创建类的情况下将状态、副作用处理和更多东西带入组件中。 React 核心团队奉上的采纳策略是不反对类组件，所以你可以升级React 版本、在新组件中开始尝试 Hooks，并保持既有组件不做任何更改。 案例： useState 和 useEffect 是 React Hooks 中的一些例子，使得函数组件中也能增加状态和运行副作用。 我们也可以自定义一个 Hooks，它打开了代码复用性和扩展性的新大门。

b. Vue Composition API 基本使用

使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，必须不断地“跳转”相关代码的选项块。

如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 能够做到的。

composition api 为vue应用提供更好的逻辑复用和代码组织。

Vue Composition API 围绕一个新的组件选项 setup 而创建。setup() 为Vue 组件提供了状态、计算值、watcher 和生命周期钩子。 并没有让原来的 API（Options-based API）消失。允许开发者结合使用新旧两种API （向下兼容）。

c. 原理

React hook 底层是基于链表实现，调用的条件是每次组件被 render 的时候都会顺序执行所有的 hooks。

Vue hook 只会被注册调用一次，Vue 能避开这些麻烦的问题，原因在于它对数据的响应是基于 proxy 的，对数据直接代理观察。（这种场景下，只要任何一个更改data 的地方，相关的 function 或者 template 都会被重新计算，因此避开了React 可能遇到的性能上的问题）。 React 中，数据更改的时候，会导致重新 render，重新 render 又会重新把hooks 重新注册一次，所以 React 复杂程度会高一些。