为什么要组件化如何组件化
原因
- 将一个页面的业务处理逻辑放在一起，处理和维护起来就会很复杂，不利于后续管理和扩展，这个时候就需要使用组件化来分门别类的管理逻辑
- 组件化有利于单元测试
- 组件化对重构更友好
- 拆分组件可能会带来性能优化
为什么组件拆分会带来性能优化？
个人简单理解
未进行组件拆分，数据更新时，vue 需要对每一个元素进行 diff 比较，如果界面上的元素很多，那就会很耗时
有进行组件拆分，数据更新时，当 vue 发现更新后的组件和更新前的组件是一致时，就无需再对组件内部的元素进行 diff 了，那么实际就减少了很多 diff 过程
原理：
每个组件都有一个 watcher，频繁渲染的重任务，可以拆分成一个子组件，避免让整个父组件都重新渲染，从而提高性能。（vue 是每个组件内进行 diff）
数据更新后 vue 的执行流程
数据更新 =》 ... 触发_update => patch => patchVnode => updateChidren ...
这是 virtual dom diff 部分过程，在这个过程中 updateChildren 对于有没拆分组件有着巨大的差异
| 拆成组件 | 不拆组件 | |
|---|---|---|
| updateChidren | 不用遍历检测所有子节点 | 需要遍历所有子节点（重复 patchVnode 步骤） |
当 dom 节点足够多的时候，遍历检测节点也就大量的时间消耗
如何进行组件拆分
将组件分为业务组件和 UI 组件
业务组件
- 负责和数据打交道，发出各种请求，对传入和传出数据进行一定的转换，使传入数据符合 UI 组件的需要，使传出数据符合后端接口或其他组件的需要
- 将处理后的数据通过 props 交给 UI 组件，让 UI 组件进行数据的展示
- 接收父组件的参数。返回给父组件需要的值
UI 组件
- 接收父组件或 vuex/pinia 传入的数据，并对数据进行 UI 层面的展示
- 将界面操作之后的结果数据，重新传给父组件或 vuex/pinia
- 处理各种交互逻辑
组件化之后多个组件间数据如何共享
- 项目开发中优先使用
vuex,pinia实现组件之间的数据共享或者说数据传递 - 第三方组件开发中优先通过 prop 和事件进行组件之间的数据共享或者说数据传递，跨层级之间的数据传递通过 provide/inject
组件化之后多个组件间的事件通信
- vue3 通过
mitt工具 - vue2 通过
EventBus