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

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

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的调度以及内存的分配。

全局注册组件语法糖

全局组件注册优化

将组件构造器对象传入注册组件函数

局部注册组件语法糖

局部组件注册优化

将组件构造器对象传入注册组件函数

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

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

时间: 2024-08-27 20:09:25

vue组件化之模板优化及注册组件语法糖的相关文章

App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南

面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components ).为开发者更好的开发 App 提供了非常好的样本.这个框架里的组件是配合 Android 组件生命周期的,所以它能够很好的规避组件生命周期管理的问题.今天我们就来看看这个库的使用. 通用的框架准则 官方建议在架构 App 的时候遵循以下两个准则: 关注分离 其中早期开发 App 最常见的做法是在 Activity 或者 Fragment 中写了大量

Vue 全局注册组件和局部注册组件

Vue 组件化的思想大大提高了模块的复用性和开发的效率,在使用组件时,一般分为几个步骤,分别是:定义组件.引入组件,注册组件,使用组件.本节主要针对Vue中如何注册组件进行阐述. 下面我们一起来看如何全局注册组件,如何局部注册组件. 页面显示结果如下: [说明]: 1. com-one  com-two 为全局注册组件, com-three  com-four 为局部注册组件: 2. 全局注册组件为 Vue.component()方法:局部注册组件为 components 属性,它的属性值是一个

vue和react之间关于注册组件和组件间传值的区别

注册组件 Vue中:1.引入组件:2.在components中注册组件:3.使用组件; React中:1.引入组件:2.使用组件; 子父传值 Vue中: 父组件向子组件传值: 1.在父组件中绑定值:2.子组件通过在props中接收值:3.正常使用; 子组件向父组件传值 1.子组件通过this.$emit订阅:2.父组件通过v-on监听: React中: 父组件向子组件传值: 1.在父组件中直接写值:2.在子组件中通过this.props.接收值: 子组件向父组件传值: (方法一) 1.给子组件定

高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具

目录 一.概述 二.效果展示 三.实现方案分析 1.第一阶段 2.第二阶段 3.第三阶段 一.概述 好久没有做业务相关的UI功能了,比较炫酷的交互效果也写的少了,最近花了2天时间写了一个简易的高仿富途牛牛组件化的功能,当然了这只是一个初步的效果,而且没有做贴图.美化等工作,但是基本的功能已经有了.本篇文章只是作为组件化的一个开始,后续还会陆续引入更多关于组件化的介绍,相信功能也会越来越丰富.除此之外,富途牛牛的一些其他高级功能也会陆续引入,不乏有k线.分时.五日.指标.自选这样的复杂功能. 自选

面试指南」JS 模块化、组件化、工程化相关的 15 道面试题

JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.export 是什么? 6.module.export.export 与 export defalut 有什么区别? 7.什么是组件化? 8.组件化的原则是什么? 9.全局组件与局部组件的区别? 10.如何注册一个全局组件,并使用它? 11.局部组件又是如何注册并使用的? 12.如何封装一个高复用的 Vu

组件化设计与开发

http://colachan.com/post/3545 终于迎来一期特刊.最近打算在公司内部做一个分享,讲的是组件化的设计与开发的思维方式.准备完演讲资料,发现这完全可以改成一篇文章.藏着掖着不合适,发出来分享给有需求的朋友吧,就当是个试讲了,希望大家帮忙指出错误. 下载地址:https://www.jianguoyun.com/p/DY1Z3bEQwKOaBhimoyg 由于本文首先是以keynote的形式诞生的,其中还有动画和视频,所以我比较推荐大家直接下载keynote文件(也存了PP

Web应用的组件化(一)

基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化:减少部署成本,提高开发效率. 减少部署成本的方面,业界研究得非常多,比如近几年很流行的“去IOE”,就是很典型的,从一些费用较高的高性能产品迁移到开源的易替换的产品集群,又比如使用Linux + Mono来部署.net应用,避开Windows Server的费用. 提高开发效率这方面,业界

Web应用的组件化

基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化:减少部署成本,提高开发效率. 减少部署成本的方面,业界研究得非常多,比如近几年很流行的"去IOE",就是很典型的,从一些费用较高的高性能产品迁移到开源的易替换的产品集群,又比如使用Linux + Mono来部署.net应用,避开Windows Server的费用. 提高开发效率这

【转】Web应用的组件化开发(一)

原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途径来优化:减少部署成本,提高开发效率. 减少部署成本的方面,业界研究得非常多,比如近几年很流行的“去IOE”,就是很典型的,从一些费用较高的高性能产品迁移到开源的易替换的产品集群,又比如使用Linux + Mono来部署.net