📘 组件化开发 · 30章

🎒 复用策略 · 从入门到精通
01 组件化思想
什么是组件化 为什么需要 历史演变 核心原则
02 组件设计原则
单一职责 接口隔离 高内聚低耦合 可复用性
03 组件分类
基础组件 业务组件 布局组件 容器组件 高阶组件
04 组件通信
Props/$emit 兄弟通信 Provide/Inject 全局状态管理
05 Props设计
类型定义 默认值 校验 单向数据流
06 Slot插槽
默认插槽 具名插槽 作用域插槽 复用场景
07 自定义事件
命名规范 参数传递 事件修饰符 事件总线
08 组件生命周期
创建阶段 挂载阶段 更新阶段 销毁阶段 钩子实战
09 Composition API
setup函数 ref/reactive computed/watch 组合式生命周期
10 组件复用模式
混入(Mixin) 自定义指令 插件系统 渲染函数
11 高阶组件
概念 实现方式 应用场景 注意事项
12 Renderless组件
无渲染概念 作用域插槽实现 优势
13 组件库设计
架构设计 目录结构 命名规范 文档生成
14 样式隔离
Scoped CSS CSS Modules CSS-in-JS BEM命名
15 组件测试
单元测试 组件测试 快照测试 测试覆盖率
16 性能优化
组件懒加载 虚拟列表 函数式组件 KeepAlive
17 状态管理
Vuex/Pinia Store设计模式 模块化状态 持久化方案
18 组件库打包
Rollup/Vite 按需加载 Tree Shaking 多格式输出
19 TypeScript支持
类型定义 Props类型推导 事件类型声明 泛型组件
20 表单组件
表单验证 双向绑定 自定义表单控件 设计模式
21 弹窗组件
模态框设计 命令式调用 组件式调用 弹窗队列管理
22 表格组件
设计模式 列配置化 排序筛选 虚拟滚动表格
23 树形组件
递归组件 展开折叠 拖拽排序 异步加载
24 拖拽组件
HTML5拖拽API 拖拽排序 拖拽上传 拖拽库封装
25 动画组件
Vue过渡动画 JS动画库 动画组件封装 页面过渡动效
26 国际化组件
i18n集成 语言切换 组件内国际化 动态语言包
27 主题定制
CSS变量方案 主题切换 动态主题 组件级覆盖
28 无障碍访问
ARIA属性 键盘导航 屏幕阅读器 焦点管理
29 微前端组件
微前端架构 组件共享方案 跨应用通信 独立部署
30 实战项目
从零搭建组件库 文档站点 CI/CD集成 发布到npm
📢