Vue 3 的 Composition API 是重构组件逻辑组织的底层机制，以函数封装响应式状态与副作用，依托 Proxy 响应式系统，通过 setup() 统一入口、ref/reactive 等 API、组合式函数及 TypeScript 深度协同实现高内聚、可复用、强类型逻辑组织。
Vue 3 的 Composition API 不是语法糖，而是一套重构组件逻辑组织方式的底层机制——它把“功能”作为代码组织单位，用函数封装响应式状态、副作用和生命周期，让复杂逻辑可聚合、可复用、可测试。
响应式系统是 Composition API 的根基
Composition API 依赖 Vue 3 全新基于 Proxy 的响应式引擎。与 Vue 2 的 Object.defineProperty 不同，Proxy 能直接拦截对象整体，天然支持数组索引变更、新增属性监听、Map/Set 等数据结构，并大幅减少初始化开销。
-
ref()：用于基本类型或需要被解包的单个值，内部包装为 { value: ... } 对象，模板中自动解包（
{{ count }}不需写{{ count.value }}） - reactive()：用于对象或嵌套结构，返回一个 Proxy 包装的响应式对象，访问属性无需 .value
- readonly() / shallowRef() / shallowReactive()：提供细粒度控制，避免意外修改或提升性能
setup() 是逻辑执行与注入的统一入口
setup() 在组件实例创建前执行（早于 beforeCreate），没有 this 上下文，接收 props 和 context（含 emit、attrs、slots）。它不是生命周期钩子，而是 Composition API 的“逻辑沙盒”——所有响应式声明、计算属性、侦听器、生命周期注册都发生在这里。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 返回的对象会自动暴露给模板，其中 ref 自动解包，reactive 属性直接可用
- props 是响应式对象，解构会丢失响应性，推荐用
toRefs(props)或toRef(props, 'xxx') - 生命周期函数如
onMounted、onUpdated必须在 setup 内调用，才能绑定到当前组件实例
逻辑复用靠组合式函数（Composables），而非 mixins
Composition API 把跨组件逻辑抽象为纯函数，即 Composable —— 它接收参数、创建响应式状态、注册副作用、返回可被解构使用的值。这种模式彻底规避了 mixins 的命名冲突与来源模糊问题。
立即学习“前端免费学习笔记（深入）”；
- 例如
useDateFormat(dateRef)可返回格式化字符串、格式化方法、原始日期等，不同组件按需解构使用 - Composable 可嵌套调用（如
useApi内部使用useLoading），形成逻辑分层 - 配合 TypeScript，每个 Composable 都能精准定义输入输出类型，IDE 支持强提示
类型系统与运行时深度协同
TypeScript 不再是“贴层”，而是 Composition API 的一等公民。ref、computed、watch 等 API 均有泛型签名，类型推导从声明直达模板。
-
const list = ref<string>([])</string>→list.value.push(123)会在编译时报错 - defineProps / defineEmits 使用泛型宏（
defineProps()），无需额外接口声明 - 组合函数返回值可导出完整类型，比如
useSearch<t>(api: (q: string) => Promise<t>)</t></t>
