组合式API.

不装 Pinia 也能做简单状态管理。本文手把手用 reactive 抽出全局 store，让多个组件共享同一份状态，并把修改逻辑集中到动作里。

Vue 3的单文件组件（SFC）是.vue文件格式，把模板、逻辑、样式封装在一个文件里。本文从SFC的基本概念讲起，搞清楚template、script、style三个块怎么写、选项式和组合式两种写法有啥区别、SFC的9大优点、以及什么场景 …

Vue 3 Composables最强大的特性是组合与嵌套——一个Composable可以调用另一个Composable，像搭积木一样构建复杂逻辑。本文通过useEventListener简化useMouse、用Composable拆分复杂 …

详细讲解 Vue 3 defineAsyncComponent 的两种调用方式（函数式和对象式），深入分析各配置项的作用和使用场景。

深入讲解 Vue 3 inject 的注入别名机制、默认值设置、工厂函数延迟计算以及选项式 API 中的 inject 配置，帮助读者安全优雅地使用依赖注入。

深入讲解 Vue 3 中 provide 与响应式数据的配合使用原则，详解状态变更内聚策略、readonly 防篡改机制以及选项式 API 中的计算属性响应性处理。

深入讲解 Vue 3 中 provide 的组合式 API 用法、选项式 API 用法、应用层 provide 以及函数式 provide 的核心差异与适用场景。

从多层级组件通信痛点切入，深入剖析 prop 逐级透传问题根源，详解 Vue 3 provide/inject 依赖注入机制的核心原理与基础用法。

Vue3组件生命周期分创建、挂载、更新、销毁四阶段，提供选项式（组件选项定义钩子）与组合式（导入钩子函数）两种API。需注意created初始化数据、mounted操作DOM等场景，避免updated修改数据、异步注册组合式钩子等错误。

Vue3生命周期钩子优化需关注性能与陷阱。优化策略：onMounted聚焦必要操作，合并DOM操作，延迟非关键初始化；onUpdated用watch替代避免重复执行；onUnmounted及时清理定时器、事件监听等资源。陷阱：避免箭头函数导 …

Vue 3生命周期钩子分选项式和组合式并对应，如beforeMount/onBeforeMount等；响应式系统基于Proxy实现依赖收集与更新。两者协同：创建阶段初始化响应式数据，挂载阶段绑定数据与DOM，更新阶段响应式变化触 …

Vue 3生命周期钩子是组件不同阶段自动执行的函数，选项式与组合式API对应关系明确。初始化阶段（beforeCreate/created）完成数据观测；挂载阶段（beforeMount/mounted）操作DOM；更新阶 …

Vue组件开发涵盖基本原则（单一职责、可复用、可维护）、设计实践（规范Props、自定义事件、插槽、组合式API复用逻辑）、通信方式（Props/Events、Provide/Inject、Pinia）、性能优化（异步组件、memo、虚拟列 …

Vue2 Mixins存在属性来源不清等缺陷，Vue3组合式API的Composable通过封装有状态逻辑函数解决复用问题。如useMouse追踪鼠标位置、useFetch处理异步数据，遵循命名、参数处理、返回值设计等最佳实践，通过解构使 …

Vue中，v-for模板引用会自动收集为数组，需在onMounted后访问。组合式API中响应式引用与模板引用统一，需同名ref声明。支持组件/元素动态引用，可结合watch/computed监听变化，应用于批量表单验证、动态内容高度计算等 …

Vue模板引用可直接访问DOM或子组件实例，用于聚焦元素、初始化第三方库等场景。3.5+组合式API用useTemplateRef，此前版本用ref，选项式API通过this.$refs访问。子组件需defineExpose（组合式） …

Vue 3的组合式API中，ref()和reactive()是创建响应式数据的核心工具。ref()可包裹任意值类型，通过.value访问，模板中自动解包；reactive()仅支持对象/数组，直接访问属性，但替换整个对象会丢失响应 …