选项式 API 是在组合式 API 的基础上实现的!关于 Vue 的基础概念和知识在它们之间都是通用的。
选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this),对于有面向对象语言背景的用户来说,这通常与基于类的心智模型更为一致。同时,它将响应性相关的细节抽象出来,并强制按照选项来组织代码,从而对初学者而言更为友好。
组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量,并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由,也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的,它的灵活性也使得组织和重用逻辑的模式变得更加强大。
就是一个以 useXxx 命名、基于 Composition API 编写的、可在多个组件之间复用的逻辑函数,是 Vue 3 最推荐的逻辑复用方式,彻底替代了 Vue 2 的 mixin。
| Hook 名 | 功能 | 类似 React Hook |
|---|---|---|
| useMouse | 鼠标位置追踪 | 自定义 |
| useFetch | 封装数据请求 | 类似 useSWR |
| useLocalStorage | 同步本地存储 | 自定义 |
| useToggle | 布尔值切换 | 自定义 |
| useDebounce / useThrottle | 防抖节流 | 自定义 |
| useTitle | 修改页面 title | 自定义 |
| useDark | 暗黑模式切换 | 自定义 |
| useEventBus | 全局事件总线 | 自定义 |