1. 组件化的定义
组件化是从产品功能角度进行分割，模块化是从代码实现角度进行分割，模块化是组件化的前提和基础。
模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。
当我们将一段代码写成一个模块的时候，它有可能是一个函数、一个对象或者其他什么做了一件单一事情的东西，我们将它做成模块是因为它完成了一个单一的功能，并且这个功能很多地方都可能用得到。
而当一个组件被从产品中抽象出来，它有时候就只是一个模块，但有时候却有相对复杂的实现，它就可能会有多个模块。
2. 组件化的意义
- 组件之间不会相互影响，能有效减少出现问题时定位和解决问题的时间
- 组件化程度高的页面，具有清晰的页面组织和高可读性的HTML结构代码，组件之间的关系一目了然
- 组件化会强迫开发人员划清各个组件的功能边界，使得开发出的功能更加健壮
3. 组件化常见问题
- 组件隔离（模块化）：既然要组件化，那么第一件事就是实现组件之间的隔离，否则内聚和低耦合就无从谈起。组件隔离其实就是模块化，这里我们需要实现CSS模块化和JS模块化。
- 组件间通信：高内聚低耦合必然会带来数据流动上的壁垒，所以隔离后的组件就要解决组件之间的通信处理。组件通信分为父子组件通信和非父子组件通信，这就涉及到接口设计、事件处理和状态管理三块内容。
- 内容分发：有时候我们希望抽象的是组件的某种行为模式或交互方式，而组件中包含的内容却是需要使用组件时才能确定，这虽然本质上也是组件间通信，但它的方式更为直观和方便。内容分发涉及到具名/非具名内容分发，子组件向分发内容传递数据等。
- 递归和循环引用：组件本质上也是模块，那么肯定也需要面对模块会面对的问题，递归和循环引用。
- 按需加载：既然已经组件化了，那么更进一步应该实现组件的按需加载，从而提高产品体验
4. 组件化
4.1 单文件组件系统与CSS局部作用域
style标签中的这个
scoped属性，它意味着当前组件的样式是局部的，不会影响其他组件Webpack的
vue-style-load会在组件的每个元素上添加一个data-v-hash属性，然后在其对应的CSS选择器上添加[data-v-aas]这个属性作为选择器
<style lang="scss" scoped>
.my-component {
color: red;
}
</style>
<template>
<div class="my-component">
{{ message }}
</div>
</template>
<script>
export default {
data () {
return {
message: 'This is my component!'
}
}
}
