Vue 组件化的理解

你能谈一下对Vue组件化的理解吗？

其实这也是一个比较常见的面试题。

当然，这个问题的面是非常广的。可以通过以下几点来描述：

定义：组件是可复用的Vue实例，准确讲它是VueComponent的实例，继承自Vue

优点：组件化可以增加代码的复用性，可维护性和可测试性。

使用场景：什么时候使用组件？以下分类可以作为参数

第一：通用组件：实现最基本的功能，具有通用性，复用性。例如按钮组件，输入框组件，布局组件等。(Element UI组件库就是属于这种通用的组件)

第二：业务组件，用于完成具体的业务，具有一定的复用性。例如登录组件，轮播图组件。

第三：页面组件，组织应用各部分独立内容，需要时在不同页面组件间切换，例如：商品列表页，详情页组件。

如何使用组件

• 定义：Vue.component()，components选项

• 分类：有状态组件(有data属性)，functional

• 通信：props，$emit()/$on()，provide/inject

• 内容分发：<slot>，<template>，v-slot

• 使用及优化：is，keep-alive，异步组件(这些内容在后面的课程中会详细的讲解)

组件的本质

vue中的组件经历如下过程 组件配置 =>VueComponent实例 => render()=> Virtual DOM=> DOM 所以组件的本质是产生虚拟DOM。