Vue.js

选项式 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 全局事件总线 自定义