关于前端:VUE-组件化

组件化

原文链接：https://note.noxussj.top/?source=sifo

介绍

咱们平时看见的 .vue 文件，其实就能够了解是一个组件。外面蕴含了 template、script、style 三个局部。template 标签中次要编写 html 代码 + vue 模板语法的代码，script 标签中次要编写 javascript 代码 + vue 选项相干代码，style 标签能够编写 css 代码或者是 scss 代码。

什么是组件化？

组件化是一种思维，就是你编写代码的时候不能像传统的思路一样，刷刷刷的把一整个页面的代码全副写在一个 .html 文件中。而是要把一个大的页面拆成若干个模块，若干个模块持续拆分成更细粒的模块，每一个模块刚好对应一个 .vue 文件。为了同学们更好的了解，以下将会进行举例。

页面 1

当初将一个残缺的页面拆分成 8 个组件，那么必定会有同学问，拆分的这么细有什么益处呢？

1. 节俭代码
2. 不便代码浏览 / 保护
3. 工作量大幅升高，最高可节俭 n 个页面的开发
4. 容易组装、拼装，扩大、像搭积木一样
5. 部分损坏不影响全局
6. 同步更新，一个中央改全局改

咱们做组件化最大的益处就是复用，不须要编写反复额定的代码。方才列举了页面 1 的拆分构造，标记红色局部是代表咱们须要编写的代码，标记绿色的局部是代表能够复用，不须要反复编写这个代码了，间接引入对应的组件就能应用了。

页面 2

你没有看错，第二个页面的开发只须要编写红色局部的代码 + 一些工作量较少的调整代码。如果是传统的形式，预计整个页面都打算从新写一遍的，或者把头部的代码从第一个页面拷贝过去，以此类推拷贝了 10 个页面的头部代码，而后新的需要来了，说头部要加个货色，那你就得在 10 个页面都要手动加上了。

原文链接：https://note.noxussj.top/?source=sifo