基础入门.

Vue组件注册分全局和局部。全局用app.component()注册，所有组件模板可用，适合高频基础组件但易冲突；局部在组件内导入，仅当前组件用，适合业务组件并支持tree-shaking。命名支持PascalCase …

Vue3组件化开发具复用（一次编写多处用）、可维护（模块化拆分、单一职责）、协作（团队并行开发）三大价值。组件以.vue单文件形式存在，含模板、逻辑及样式，支持局部/全局注册。通信通过Props（父传子）和Emits（子传父）实现。

Vue 3模板引用可直接访问DOM或组件实例，与响应式系统协同实现动态操作，v-for生成响应式数组。父组件通过useTemplateRef+defineExpose调用子组件方法，优先props/emit通信。需在onMounted访问， …

Vue模板引用通过ref获取DOM元素或子组件实例，3.5+用useTemplateRef，旧版需手动声明ref变量。用途包括程序化聚焦、初始化第三方库、读取DOM尺寸等。核心原则：优先用Props/Emit通信，避免过度依赖；子组件 …

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

Vue 3.2+的<script setup>默认封装组件内部状态和方法，需用defineExpose显式暴露。子组件通过defineExpose({状态/方法})指定需暴露内容，父组件用ref获取子组件实例后，可直接访问暴露的 …

Vue模板引用通过ref标记DOM/子组件实例。正确访问时机为组件挂载后（如onMounted钩子），动态更新或v-if时需用watchEffect监听并做null检查。常见陷阱：未挂载时访问（导致null）、Vue<3.5 …

Vue 3模板引用通过ref连接声明式代码与DOM或子组件实例，用于自动聚焦、调用子组件方法等。Composition API 3.5+用useTemplateRef，之前需手动声明；Options API用this.$refs。子组件 …

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

Vue模板引用（Template Refs）通过ref属性实现，用于直接访问DOM元素或子组件实例。Vue3.5+推荐useTemplateRef，旧版用ref变量；支持v-for数组引用、函数绑定及子组件引用（子组件 …

Vue 3中watch需显式声明监听源（支持新旧值），watchEffect自动收集依赖（立即执行）。避坑：深度监听用精准属性，内存泄漏用stop/onCleanup，高频操作加防抖。调试用Vue DevTools，可结合日志优化。

Vue3侦听器分组件内与Pinia应用：组件内watch需显式依赖，获新旧值，支持深度/立即执行；watchEffect自动追踪依赖，立即执行。Pinia可监听store状态（单个/多个/整个store），如表单数据同步。含深度监听、立即执 …

Vue 3中，watch需手动指定监听源，惰性执行且可获取新旧值，支持嵌套监听、深度监听及立即执行；watchEffect自动收集依赖，立即执行（无新旧值），支持副作用清理与执行时机调整。选型：特定源或需新旧值用watch，多依赖或自动执行 …

Vue 3侦听器需暂停恢复（手动停止用unwatch()）避免资源消耗，异步创建的需手动管理防内存泄漏。副作用用onCleanup+AbortController取消旧请求避免竞态。应用于表单自动保存、条件侦听等场景。

Vue 3 watchEffect是自动追踪响应式依赖的API，无需手动指定数据源，初始化时立即执行，追踪回调中所有响应式依赖。支持副作用清理（通过onCleanup）、执行时机控制（pre/post/sync），适用于数据请求、DOM操作 …

Vue 3中watch是响应式API，监听数据源变化执行自定义逻辑。关键选项：immediate true（初始化即执行）；once true（Vue3.4+，仅首次变化触发）；deep true（深度监听对象嵌套属性）；flush控制回调 …

Vue 3的watch支持多数据源监听：多响应式数据放入数组作源，回调接收新旧值数组；计算结果可用getter函数监听；数组监听默认关注方法和引用变化，直接索引修改需deep选项或数组方法。

Vue 3侦听器用于响应式数据变化时执行副作用，支持监听ref和reactive。监听ref可直接传入，reactive默认深度监听整个对象，单个属性需用getter函数。注意：reactive属性不能直接监听，须以函数返回，且对象新旧值引 …

Vue3侦听器（watch）用于响应式状态变化时执行副作用，支持单个ref、响应式对象、getter或数组等数据源。深层侦听器（deep:true）监听嵌套变化，即时回调（immediate：true）初始执行，一次性侦听器（once： …

文章围绕Vue 3表单处理，涵盖自定义指令（自动聚焦v-focus、防抖v-debounce）、表单提交优化（防重复提交、状态管理）、动态表单渲染（条件显示、字段类型动态渲染）及常见问题解决。

本文介绍Vue3自定义表单组件开发，包括双向绑定（3.4+用defineModel宏，低版本手动props/emit实现）、基础组件（Input/Select不同实现）、复合组件（带验证输入框、日期选择器封装），及组件库设计原则（可配置化、 …

Vue 3表单验证通过响应式数据与验证规则实现，基础验证含必填、长度限制，用validateField/validateForm方法处理字段和整体验证；支持异步验证（如检查用户名唯一性），借助async/await管理，同时控制加载状态避免 …

Vue3表单处理技巧包括：①集中管理用reactive定义响应式表单对象，对比ref适用场景；②动态表单用响应式数组存储项，通过v-for渲染，结合数组方法实现增删；③即时计算用computed追踪依赖，如购物车总价实时更新，需 …

Vue3中v-model实现表单双向绑定，基础通过value与input事件完成；支持多行文本、复选框（多绑定数组）、单选（name分组）、下拉多选（multiple属性）；提供.lazy（延迟更新）、.number（转数字）、.trim（ …

Vue3表单输入绑定通过v-model实现“数据-视图”双向同步，v-model是“value绑定+input事件”的语法糖，支持文本输入框、textarea、复选框、单选按钮、下拉框等表单元素。依赖Vue响应式系 …

Vue3事件处理性能优化：v-on方法引用复用函数避免重复创建；高频事件用Lodash防抖（等待后执行，如搜索）或节流（固定间隔，如滚动）优化；支持动态绑定与事件修饰符（.stop等），手动绑定需onUnmounted解绑；优先事件委托减少 …

Vue3跨组件通信方案：①全局事件总线用mitt实现“订阅-发布”，创建共享实例，发布用emit，订阅用on，销毁时off防内存泄漏；②provide/inject支持跨层级通信，祖先用provide提供数据/方法，后代用inject获 …

Vue3表单事件处理中，v-model实现输入框双向绑定，配合.lazy延迟更新、.number转为数字、.trim去除空格修饰符定制行为。表单提交用@submit.prevent阻止默认刷新，结合验证逻辑确保数据合法。单选框绑定单个值，复 …

DOM事件传播分捕获、目标、冒泡三阶段，Vue默认在冒泡阶段处理事件。利用冒泡机制实现事件委托优化性能，将监听器绑在父元素。事件修饰符（如.stop、.prevent等）可简化处理，支持叠加使用，文中还涉及常见修饰符组合场景及报错处理方法。

Vue3键盘事件处理包含keydown（按下触发，长按连续触发）与keyup（松开触发，单次触发），前者适实时搜索等场景，后者用于提交表单。常用按键修饰符（如.enter、.tab）替代keyCode，组合快捷 …