Posts

Vue3生命周期钩子是组件创建、挂载、更新、卸载阶段的关键函数，开发者可在特定时机执行逻辑。创建阶段（onBeforeCreate/onCreated）初始化数据；挂载阶段（onBeforeMount/onMounted）操作DOM或请求数据；更新阶段（onBeforeUpdate/onUpdated）处理DOM更新；卸载阶段（onBeforeUnmount/onUnmounted）清理副作用。代码示例展示各钩子执行时机，需避免钩子中用箭头函数、异步注册等常见错误。

Vue组件开发涵盖基本原则（单一职责、可复用、可维护）、设计实践（规范Props、自定义事件、插槽、组合式API复用逻辑）、通信方式（Props/Events、Provide/Inject、Pinia）、性能优化（异步组件、memo、虚拟列表）及常见问题排查（类型不匹配、事件绑定错误等）。

Vue 3中组件样式隔离可防止样式冲突，核心目标是确保样式仅作用于当前组件。Scoped CSS通过添加唯一属性并转换选择器实现局部作用域。可混合全局和局部样式，影响子组件根元素，需用深度选择器（»>、/deep/、::v-deep）穿透样式，还提供常见报错（子组件样式失效、动态内容样式、预处理器解析问题）解决方案。

动态组件支持运行时切换组件，通过及响应式变量实现，结合保留状态（如Tab切换）。异步组件用defineAsyncComponent按需加载，支持配置loading、error组件及超时处理，可与Suspense配合，优化应用性能减少初始加载时间。

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

Vue插槽是组件内容分发机制，实现结构与内容分离。分三类：默认插槽无名称，父内容默认渲染，可设默认值；具名插槽命名，父用template