为什么要设计组件
Vue设计组件的目的是为了提高代码的可组合性、可复用性和可维护性。组件化开发是一种将复杂的用户界面划分为独立、可重用部件的方法，使开发人员可以更加高效地构建复杂的应用程序。
通过将界面划分为多个组件，每个组件专注于特定的功能和责任，开发人员能够更好地组织和管理代码。组件可以被独立开发、测试和维护，从而提高开发效率和团队协作。
此外，Vue的组件化开发使得界面更易于扩展和定制化。开发人员可以根据应用的需求，自由组合、嵌套和复用各种组件，构建出满足用户需求的灵活、可定制的界面。
- 提高复用性
- 提高可扩展性
什么叫组件
上面的说法可能还是太模糊，具体一点讲就是：用来实现局部（特定）功能效果的代码合集（html/css/js/images/..）
如何使用
组件的类型
组件 (Component) 是 Vue.js 最强大的功能之一，在vue中组件有两种类型：
- 非单文件组件：将组件的模板、脚本和样式分开写在不同的文件中。非单文件组件会使用一些静态文件服务器或者Webpack等工具来将这些文件打包成一个完整的HTML文件，然后通过引入这个HTML文件来使用这个组件。
- 单文件组件：将组件的模板（template）、脚本（script）和样式（style）写在同一个文件中，通常使用
.vue作为文件扩展名
在实际开发中，用得最多的是单文件组件，因为它提供了更好的代码组织和维护性。下面就是一个单文件组件的例子
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
};
}
};
</script>
<style scoped>
h1 {
color: red;
}
</style>
如何使用组件
现实生活中你想要别人帮你做事，首先你需要知道别人叫什么。使用组件也是如此，如果你不知道组件的名称，即使它存在，你也无法使用它。如何知道组件的名字呢，vue中称为“注册”，必须先对组件进行注册后，才能使用。
注册有全局注册和局部注册两种方式。
- 全局注册：任何vue实例都可以使用
// 创建Vue实例之前注册组件 全局注册
Vue.component('my-component', {
template: '<div>My Component</div>'
});
// 创建Vue实例
new Vue({
el: '#app'
});
注册成功后，你可以用该组件进行构建了
<div>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</div>
- 局部注册：在特定的Vue组件内部注册其他组件的方式。通过在组件的
components选项中添加组件的定义，注册后的组件只有在该实例作用域下有效。
简单说就是A注册了B组件，则组件B只能在A中使用，无法在C中使用
<template>
<div>
<h1>主要组件</h1>
<HelloWorld></HelloWorld> <!-- 使用注册的局部组件 -->
</div>
</template>
<script>
import HelloWorld from './HelloWorld.vue' // 导入局部组件
export default {
name: 'App',
components: {
HelloWorld // 注册局部组件
}
}
</script>
组件跟Vue实例的区别
data必须是一个函数
在上述例子中，你可能会发现它的 data 并不直接提供一个对象，取而代之的是函数。一个组件的 data 选项必须是一个函数，因为这样每个实例可以维护一份被返回对象的独立的拷贝。
data () {
return {
count: 0
}
}
子组件有可能会被调用多次，而每次调用时的data数据都应该是独立的。使用函数可以避免组件被复用时，数据存在引用的关系。这样才不会出现每个子组件数据相互影响的情况。
组件没有el
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
因为最终所有的组件都要经过一个vue实例的管理，由vue实例中的el决定服务哪个容器。
总结
使用组件的三大步骤-
定义组件
注册组件
- 局部注册（实际开发中用得更多）
- 全局注册
使用组件（写组件标签） < HelloWorld >< /HelloWorld>
