Vue组件化理解

简介

主要介绍传统编程模式的一点小问题，以及对Vue组件化的理解。

如果要编写一个页面，需要结构（html），样式（css），交互（js）。

1. 如果上图，如果要编写第一个页面，需要html文件编写顶部、导航、内容、底部的html结构，并且引入渲染顶部、导航、内容、底部的四个css文件，最后引入控制顶部、导航、内容、底部交互的四个js文件，至此，页面1完成。
2. 编写页面2，顶部、商品列表，底部，编写一个顶部、商品列表，底部结构的html文件，编写一个新的控制商品列表样式的css文件，并引入已有的顶部和底部的css文件，编写一个控制商品列表交互的js文件，并引入已有的控制顶部和底部交互的js文件，页面2编写完成。

但是这样会有一点小问题：
3. 为了让css和js文件达到足够高的复用率，需要把css和js文件写的粒度比较细，这样会导致有很多的css和js文件，并且会使得网页的依赖关系变得复杂（一旦所依赖的css和js文件达到一个数量级），不好维护。
4. 代码的复用率不算很高，主要指的是html代码的复用，因为像上面两个页面，顶部和底部的html代码重复了。

不过总的来说，传统的编程方式还是问题不大的。

介绍完传统的编程方式，再来讲讲vue的组件化。

使用vue组件化重新编写刚刚传统编程方式编写的两个页面。

1. 第一个页面包含顶部、内容、导航、底部，这次不再编写html文件再引入对应的css和js文件了，而是编写四个组件，顶部组件、内容组件、导航组件、底部组件，然后直接进行组装，就形成了一个页面1，组件包含了：html、css、html以及其他的东西，直接把这些东西封装到一个组件里面，组件就是一个个页面，然后就像搭积木那样搭成我们想要的最终页面。
2. 然后编写第二个页面，直接再编写一个商品列表组件，再将其与之前编写的顶部、底部组件像搭积木那样组装起来就是页面2了。

好处：
3. 依赖关系不再复杂，之后我们编写前端实际上编写一个个组件，然后将他们进行组装就行，比如我们想要一个页面3，包含顶部、导航、商品列表，都不用编写代码了，直接创建一个父组件，直接引入3个子组件，页面就编写好了。
4. 代码高度复用，你可以发现，连相较于传统编程方法，它连html代码都复用了。

组件的定义：
组件就是实现应用中局部功能的代码和资源的集合，代码指的是html、css、js，资源指的是音频、视频、图片等资源。也就是说一个组件就是一个局部功能的所有，注意，是局部功能，组件要划分得足够细才有较高的复用率，比如我编写了一个包含顶部和底部的组件，但是我的同事只要想顶部，那么我的这个组件他就复用不了了，因为他不想要底部，如果引入我的这个组件，就必须要有顶部和底部。