Vue3组件化学习总结二

人处理问题的方式

人面对复杂问题的处理方式：

任何一个人处理信息的逻辑能力都是有限的

所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。

但是，我们人有一种天生的能力，就是将问题进行拆解。

如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。

认识组件化开发

组件化也是类似的思想：

如果我们将一个页面中所有的处理逻辑 全部放在一起，处理起来就会变得非常 复杂，而且不利于后续的管理以及扩展；

但如果，我们讲一个页面拆分成一个个 小的功能块，每个功能块完成属于自己 这部分独立的功能，那么之后整个页面 的管理和维护就变得非常容易了；

如果我们将一个个功能块拆分后，就可 以像搭建积木一下来搭建我们的项目；

Vue的组件化

组件化是Vue、React、Angular的核心思想

前面我们的createApp函数传入了一个对象App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件；

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

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

 接下来，我们来学习一下在Vue中如何注册一个组件，以及之后如何使用这个注册后的组件。

注册全局组件

我们先来学习一下全局组件的注册：

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

通过component方法传入组件名称、组件对象即可注册一个全局组件了；

 之后，我们可以在App组件的template中直接使用这个全局组件：

 

全局组件的逻辑

当然，我们组件本身也可以有自己的代码逻辑： 比如自己的data、computed、methods等等

注册局部组件

全局组件往往是在应用程序一开始就会全局组件完成，那么就意味着如果某些组件我们并没有用到，也会一起被注册：

比如我们注册了三个全局组件：ComponentA、ComponentB、ComponentC；

在开发中我们只使用了ComponentA、ComponentB，如果ComponentC没有用到但是我们依然在全局进行 了注册，那么就意味着类似于webpack这种打包工具在打包我们的项目时，我们依然会对其进行打包；

这样最终打包出的JavaScript包就会有关于ComponentC的内容，用户在下载对应的JavaScript时也会增加包的大小；

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

局部注册是在我们需要使用到的组件中，通过components属性选项来进行注册；

比如之前的App组件中，我们有data、computed、methods等选项了，事实上还可以有一个components选项；

该components选项对应的是一个对象，对象中的键值对是组件的名称: 组件对象；

Vue的开发模式

目前我们使用vue的过程都是在html文件中，通过template编写自己的模板、脚本逻辑、样式等。

但是随着项目越来越复杂，我们会采用组件化的方式来进行开发： 这就意味着每个组件都会有自己的模板、脚本逻辑、样式等；

当然我们依然可以把它们抽离到单独的js、css文件中，但是它们还是会分离开来；

也包括我们的script是在一个全局的作用域下，很容易出现命名冲突的问题；

并且我们的代码为了适配一些浏览器，必须使用ES5的语法；

在我们编写代码完成之后，依然需要通过工具对代码进行构建、代码；

所以在真实开发中，我们可以通过一个后缀名为 .vue 的single-file components (单文件组件) 来解决，并且可以使用webpack或者vite或者rollup等构建工具来对其进行处理。

单文件的特点

在这个组件中我们可以获得非常多的特性：

代码的高亮；

ES6、CommonJS的模块化能力；

组件作用域的CSS；

可以使用预处理器来构建更加丰富的组件，比 如TypeScript、Babel、Less、Sass等；