组件化开发

人类社会基于化约论

当处理复杂问题的时候，总是会将问题拆分为了很多小问题然后组合解决

组件化也是类似思想，大前端目前都是组件化的天下

我们思考的往往是如何将一个完整页面中拆分成一个个区域，每个区域完成属于自己这部分功能，这样细分代码非常有利于复用和维护

之前我们createApp函数传入了一个对象App，这个对象实际本质是我们应用程序的根组件

组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用

任何的应用都会被抽象成一颗组件树

1.注册组件

注册组件分成两种

• 全局组件：在任何其他的组件中都可以使用的组件
• 局部组件：只有在注册的组件中才能使用的组件

注册全局组件

全局组件需要使用我们全局创建的app来注册组件

通过app.component方法传入组件名称和组件对象即可注册一个全局组件

全局组件本身可以有自己data、computed、methods等逻辑

之后我们任意组件中都可以直接使用这个全局组件

组件的名称

app.component注册一个组件的时候，第一个参数是组件的名称，定义组件名的方式有两种：

1. 使用使用kebab-case（短横线分割符），引用组件的时候也必须使用kebab-case，例如 <my-componet-name>
2. 使用PascalCase（驼峰标识符），引用组件的时候两种命名都可以使用，例如<my-componet-name>和<MyComponentName>

注册局部组件

全局组件任意地方都可以使用，那么就意味着如果某些组件我们并没有用到，也会一起被注册，对于性能肯定是会一些影响

所以在开发中我们通常使用组件的时候采用的都是局部注册

• 局部组件通过components属性选项来进行注册
• 该components选项对应的是一个对象，对象中的键值对是 组件的名称: 组件对象

2.Vue的单文件开发模式

之前我们使用Vue都是在html文件中

但是随着项目的复杂，我们会采用组件化的方式开发

就意味着每个组件都会有自己的模板、脚本逻辑、样式等

所以在真实开发中，我们可以通过一个后缀名为 .vue 的single-file components(单文件组件) 来解决

并且这个.vue文件可以使用webpack或者vite或者rollup等构建工具来对其进行处理。

单文件的特点

• 代码的高亮
• ES6、CommonJS的模块化能力
• 组件作用域的CSS
• 可以使用预处理器来构建更加丰富的组件，比 如TypeScript、Babel、Less、Sass等

如何支持SFC

如果我们想要使用SFC的.vue文件，比较常见的是两种方式：

1. 使用Vue CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件
2. 自己使用webpack或rollup或vite这类打包工具，对其进行打包处理

但是无论是后期我们做项目，还是在公司进行开发，通常都会采用Vue CLI的方式来完成