组件化
原文链接:https://note.noxussj.top/?source=sifo
介绍
咱们平时看见的 .vue 文件,其实就能够了解是一个组件。外面蕴含了 template、script、style 三个局部。template 标签中次要编写 html 代码 + vue 模板语法的代码,script 标签中次要编写 javascript 代码 + vue 选项相干代码,style 标签能够编写 css 代码或者是 scss 代码。
什么是组件化?
组件化是一种思维,就是你编写代码的时候不能像传统的思路一样,刷刷刷的把一整个页面的代码全副写在一个 .html 文件中。而是要把一个大的页面拆成若干个模块,若干个模块持续拆分成更细粒的模块,每一个模块刚好对应一个 .vue 文件。为了同学们更好的了解,以下将会进行举例。
页面 1
当初将一个残缺的页面拆分成 8 个组件,那么必定会有同学问,拆分的这么细有什么益处呢?
- 节俭代码
- 不便代码浏览 / 保护
- 工作量大幅升高,最高可节俭 n 个页面的开发
- 容易组装、拼装,扩大、像搭积木一样
- 部分损坏不影响全局
- 同步更新,一个中央改全局改
咱们做组件化最大的益处就是复用,不须要编写反复额定的代码。方才列举了页面 1 的拆分构造,标记红色局部是代表咱们须要编写的代码,标记绿色的局部是代表能够复用,不须要反复编写这个代码了,间接引入对应的组件就能应用了。
页面 2
你没有看错,第二个页面的开发只须要编写红色局部的代码 + 一些工作量较少的调整代码。如果是传统的形式,预计整个页面都打算从新写一遍的,或者把头部的代码从第一个页面拷贝过去,以此类推拷贝了 10 个页面的头部代码,而后新的需要来了,说头部要加个货色,那你就得在 10 个页面都要手动加上了。
原文链接:https://note.noxussj.top/?source=sifo