码迷,mamicode.com
首页 > 其他好文 > 详细

vue组件化之模板优化及注册组件语法糖

时间:2019-12-17 22:46:30      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:script   extend   破坏   ora   构造器   tran   字符串   rgb   str   

vue组件化之模板优化及注册组件语法糖

https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js进行了初体验,输出了经典的hello world.但是在这个过程遇到了编程最恶心的事情----字符串拼接

技术图片
enter description here

vue.extend函数需要一个对象,这个对象的属性是个模板,这个模板的源码是H5.

模板优化

技术图片
创建组件构造器

在JavaScript里面写H5代码,这对于模块化来说是一种破坏。
再者,字符串拼接是非常恶心的事情,看上面的gif,可知字符串拼接不能格式化不能代码检查,要自己动手调格式,非常容易出错。

在script标签之前使用template标签,相当于在H5文档编写H5代码,不仅代码可以缩进,还有代码检查。

技术图片
template模板

注册组件语法糖

所谓的注册组件语法糖是指省去组件构造器的定义,直接将组件构造器对象传入注册组件函数里,这样会减少CPU的调度以及内存的分配。

全局注册组件语法糖

技术图片
全局组件注册优化

技术图片
将组件构造器对象传入注册组件函数

局部注册组件语法糖

技术图片
局部组件注册优化

技术图片
将组件构造器对象传入注册组件函数

一般来说,很少使用全局组件,通常都是使用局部组件。

vue组件化之模板优化及注册组件语法糖

标签:script   extend   破坏   ora   构造器   tran   字符串   rgb   str   

原文地址:https://www.cnblogs.com/singledogpro/p/12056925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!