vue 源码学习之 面试那些事 ----对 vue组件化的理解

源码分析1： 组件的定义

// 组件定义
Vue.component('comp', {
	templaet: '<div>this is a component</div>'
})

// 组件定义， src/core/global-api/assets.js
<template>
	<div>
	    this is a component
	</div>
</template>

// webpack 的 vue-loader 会编译 template 为 render 函数，最终 导出的依然是(.vue --> .js)组件配置对象
// style  ----> style-loader
// css ----> css-loader

源码分析2: 组件化的优势

lifecycle.js --  mountComponent()

// 组件、watcher 、渲染函数和更新函数之间的关系

源码分析3: 组件化的实现

构造函数，   src/core/global-api/extend.js

实例化及挂载，    src/core/vdom/patch.js  --- createElm()

整个过程得出一个 结论： 实例是自上而下， 挂载是自下而上的过程

总结：

1. 组件是什么？组件化是什么？ 

   也就是说组件是 独立和 可复用的代码组织单元。 组件系统是 vue 核心的特性之一，它是的开发者 使用小型的，独立的和一般能够 复用的组件构建 大型的应用

2.  组件开发能大幅度的提升 应用 开发的效率、测试性、复用性等

3.  组件按使用分类 ： 页面组件， 业务组件， 通用组件

4.  vue 的组件是基于配置的，咱们一般编写的组件是组件配置而 非 组件， 框架 后续会生成其构造函数， 他们都是 基于 vueComponent, 扩展 于vue

5.  vue中 常见的组件化技术： 属性 prop,  自定义事件，(扩展组件内的内容)插槽等， 他们主要用于 组件通讯、扩展

6.  合理的划分组件， 有助于 提高应用性能

7.  组件(独立的组件单元)应该是 高内聚， 低耦合的

8.  遵循单线数据流 的原则