复习Vue15:Vue
组件化的理解
关于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
关于这块内容,在后面还会深入的探讨,包虚拟dom
,以及vue
的源码。