谈一谈对 vue 组件化的理解？

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

有以下方面的理解：

组件化是 vue 的精髓，vue 应用是由一个个组件构成的。通常一个应用会以一棵嵌套的组件树的形式来组织。

组件系统是 Vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；

本质： 本质是产生虚拟 DOM

原则： 组件应该是 高内聚、低耦合 的，从而增强程序的 复用性、可维护性和可测试性

优点：

• 组件是 独立 和 可复用 的

  独立：每个组件都会各自独立维护它的数据。因为你每用一次组件，就会有一个它的新实例被创建

  可复用：组件是可复用的组件实例，所以它们与根实例接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

  • 把组件作为自定义元素来使用，合理的划分组件

  • 提⾼开发效率，简化调试步骤

  • 提升项⽬可维护性，便于多⼈协同开发

• 提升应用性能：让组件颗粒化（将需要频繁更新的组件提取出来），减少 diff 算法的执行。只进行一部分 dom 去进行计算和刷新。而不是一整颗 dom 进行更新。这样执行效率更高效

组件方式：

• 全局组件

• 局部组件

组件分类：

• 有状态组件：只要在组件 data 选项中定义数据，都是有状态

• 无状态组件（functional）：性能提升，实例-自定义组件实现双绑

• 抽象组件（abstract）：缓存（keep-alive），动画（transition）

• 动态组件：路由懒加载，组件动态导入

使用场景：

• 页面组件（路由组件）：组织应用各部分独立内容，需要时在不同页面组件间切换，一般不存在复用性（必须经过路由的组件，形成页面与页面的连接）。如首页、列表页、详情页

• 业务组件：它们业务性很强，同时具有一定的通用性（复用性）。如登录，注册，轮播图，购物车等

• 通用组件：实现最基本的功能，具有通用性、复用性。一般我们会引入 UI 框架（elementUI，iview，antd 等），如果这个 UI 框架不合适，会自己重新写一个这样的组件。如按钮，icon，输入框等

相关技术：

• 组件通信：

  • props、emit
  • ref 模板引用、defineExpose（Vue3新增）
  • v-model、defineModel（Vue3新增）
  • provide/inject
  • $attr、$listeners（Vue3将其合并到 $attr 内）
  • $root、parent
  • $children（Vue3移除）
  • 事件总线 eventBus（Vue3移除 $on）
  • vuex

• 组件扩展：

  • 内容扩展：插槽（匿名插槽、具名插槽、作用域插槽）
  • 逻辑扩展：mixins、extends、hook（Composition API）

组件优化：

• 动态组件：is关键字
• 缓存组件：keep-alive
• 异步组件
• （Vue2）无状态组件：functional

特点：组件是基于配置的，平常编写的是组件配置，而不是组件。框架后续会生成其构造函数。

生成其构造函数：基于 VueComponent，扩展于 Vue

需要经历的过程如下：

组件配置 => VueComponent实例（构造函数） => render() => （Virtual DOM 虚拟DOM）=> DOM

组件转换成 VueComponent 实例，构造函数通过方式把它 new 出来变成实例，实例里面有 render 函数，render 函数在合适的时间里，将模板转换成虚拟 DOM，虚拟 DOM 通过更新转换成真实的 DOM