SuperAPI AI 工具集

composables

编程与开发

查看项目

更新于 10-16 07:56

技能介绍

用途:讲解 Vue 组合式函数(composables),即用 Composition API 封装并复用有状态逻辑的函数,替代 Options API 中分散的代码组织方式。适用于需要在多个组件间共享有状态逻辑、避免重复,或把数据获取、事件监听、定时器等关注点抽取为可复用函数的场景。

主要能力:说明如何在组合式函数内使用 ref()、reactive() 和生命周期钩子(onMounted、onBeforeUnmount),并返回响应式状态与方法供组件模板使用;对比 Options API 的 data、computed、watch、methods、created 等选项写法,展示 Composition API 通过 setup() 入口和从 vue 导入的独立函数改写计数器与窗口宽度示例,再进一步拆分为 useCounter、useWidth 两个组合式函数,在 App 组件中引入并解构使用。

使用方式与约定:组合式函数名按约定以 use 前缀命名,例如 useCounter、useWidth;内部用 ref(initialCount) 创建响应式变量,定义 increment、decrement、handleResize 等函数,在 onMounted 中注册 resize 监听并在 onBeforeUnmount 中移除;最后 return 出 count、width、increment、decrement 等,组件在 setup() 中调用并返回给模板。相比 Options API,官方资料称其在代码组织、复用性与 TypeScript 支持上更优,且更利于类型推断。

限制与缺失:资料未提供安装命令、版本要求、性能数据、收费信息或平台说明,暂未提供;示例源码出处为 patterns.dev/vue/composables,参考资料为 Vue 文档 Composables 与 VueUse。