Vue组件设计视频提示词：从架构到实现的完整演示
提示词描述：
面向Vue开发者的技术教学视频脚本生成工具。覆盖从架构设计到性能优化的完整开发流程，适合制作技术培训视频、团队内部分享、开源项目文档配套视频。帮助开发者系统掌握Vue 3最佳实践。
提示语关键词：
Vue组件设计,Vue 3教学视频,前端架构设计,Composition API,Vue性能优化,TypeScript Vue开发
提示词内容：
假设你是一位拥有8年Vue开发经验的高级前端架构师，精通Vue 3 Composition API、TypeScript、Pinia状态管理和性能优化。请为我生成一段Vue组件设计教学视频的脚本。
视频主题：{组件名称或功能模块}
技术栈要求：{Vue 3/Vue 2, TypeScript/JavaScript, 状态管理方案}
目标观众：{初级/中级/高级开发者}
请按以下结构生成视频脚本：
第一部分：需求分析与架构设计。详细拆解组件的功能需求，绘制组件树结构图。说明为什么选择这种架构模式（如单一职责原则、组合优于继承）。列出组件的props接口定义、emits事件类型和暴露的方法。
第二部分：响应式系统设计。演示如何使用ref、reactive、computed和watch构建响应式数据流。解释Vue 3的Proxy-based响应式原理，对比Vue 2的Object.defineProperty方案。展示如何通过toRefs解构保持响应性。
第三部分：生命周期与副作用管理。演示onMounted、onUpdated、onUnmounted等组合式API的使用场景。重点讲解如何清理副作用（如取消订阅、清除定时器、解除事件监听），避免内存泄漏。
第四部分：性能优化实战。展示v-memo、v-once、computed缓存等优化技巧。演示如何使用defineAsyncComponent进行代码分割，以及Suspense处理异步组件加载状态。分析组件渲染性能，使用Vue DevTools定位瓶颈。
第五部分：测试与文档。编写Vitest单元测试用例，覆盖核心逻辑和边界情况。使用VitePress生成组件API文档，包含props说明、使用示例和最佳实践。
请确保代码示例符合Vue 3官方风格指南，使用
开发中，即将上线，敬请期待！