vue组件化之模板优化及注册组件语法糖
vue组件化之模板优化及注册组件语法糖
在 https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js进行了初体验,输出了经典的hello world.但是在这个过程遇到了编程最恶心的事情----字符串拼接。
![enter description here enter description here](./images/1576570293819.png)
enter description here
vue.extend函数需要一个对象,这个对象的属性是个模板,这个模板的源码是H5.
模板优化
![创建组件构造器 创建组件构造器时拼接字符串](./images/%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E6%9E%84%E9%80%A0%E5%99%A8_2.gif)
创建组件构造器
在JavaScript里面写H5代码,这对于模块化来说是一种破坏。
再者,字符串拼接是非常恶心的事情,看上面的gif,可知字符串拼接不能格式化,不能代码检查,要自己动手调格式,非常容易出错。
在script标签之前使用template标签,相当于在H5文档编写H5代码,不仅代码可以缩进,还有代码检查。
![template模板 template模板](./images/template%E6%A8%A1%E6%9D%BF_1.gif)
template模板
注册组件语法糖
所谓的注册组件语法糖是指省去组件构造器的定义,直接将组件构造器对象传入注册组件函数里,这样会减少CPU的调度以及内存的分配。
全局注册组件语法糖
![全局组件注册优化 全局注册组件语法糖](./images/%E5%85%A8%E5%B1%80%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C%E4%BC%98%E5%8C%96.gif)
全局组件注册优化
![将组件构造器对象传入注册组件函数 将组件构造器对象传入注册组件函数](./images/1576587733091.png)
将组件构造器对象传入注册组件函数
局部注册组件语法糖
![局部组件注册优化 局部注册组件语法糖](./images/%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C%E4%BC%98%E5%8C%96.gif)
局部组件注册优化
![将组件构造器对象传入注册组件函数 将组件构造器对象传入注册组件函数](./images/1576587457506.png)
将组件构造器对象传入注册组件函数
一般来说,很少使用全局组件,通常都是使用局部组件。