这个系列记录我在一年vue开发中总结的一些经验和技巧。
利用Object.freeze()提升性能
Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。
vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增。
并且,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉。举个例子:
<p v-for="item in list">{{ item.value }}</p>
new Vue({
data: {
// vue不会对list里的object做getter、setter绑定
list: Object.freeze([
{ value: 1 },
{ value: 2 }
])
},
created () {
// 界面不会有响应
this.list[0].value = 100;
// 下面两种做法,界面都会响应
this.list = [
{ value: 100 },
{ value: 200 }
];
this.list = Object.freeze([
{ value: 100 },
{ value: 200 }
]);
}
})
vue的文档没有写上这个特性,但这是个非常实用的做法,对于纯展示的大数据,都可以使用Object.freeze提升性能。
使用 vm.$compile 编译dom
$compile函数可以用来手动调用vue的方式来编译dom。在你需要处理某个jQuery插件生成的html或者服务端返回的html的时候,这个函数可以派上用场。但注意这是个私有api,随时都有可能变动,并且这种做法有违vue的理念。仅在不得已的时候使用。
new Vue({
data: {
value: 'demo'
},
created () {
let dom = document.createElement('div');
dom.innerHTML = '{{ value }}';
this.$compile(dom);
}
})
合理使用track-by="$index"
track-by是vue为循环提供的优化方法,可以复用多次v-for中id相同的dom。如果你的数据没有一个唯一的id,也可以选择使用track-by="$index",但必须注意一些副作用。
举个例子:
new Vue({
data: {
list: [1, 2, 3]
}
})
<div id="demo-1">
<p v-for="item in list">{{ item }}</p>
</div>
<div id="demo-2">
<p v-for="item in list" track-by="$index">{{ item }}</p>
</div>
这时候执行this.list = [4, 5, 6],可以通过F12观察到,demo-1里的dom被全部删除,然后重新循环list生成dom,而demo-2不会删除dom,只是把他们的text格子修改为4,5,6。这就是track-by="$index"的效果,复用了两次v-for中$index相同的dom。
这是一个很好的优化方法,但不是所有场景都适用,比如循环中包含表单控件或子组件时,由于dom并不会被删除重新生成,会导致第二次执行的v-for,原有表单控件的值不会改变,可以看这个例子:https://jsfiddle.net/jysboza9/1/
不要滥用Directive
网上有一种说法,认为dom操作都应该封装在指令中。实际开发中,我认为并不应该遵循这种教条。是否使用指令应该看你实现的是什么功能,而不是看是否操作了dom。比如说你想用vue封装一个jQuery插件,来看看下面哪种封装方法比较好:
<!-- component -->
<datepicker></datepicker>
<!-- directive -->
<div v-datepicker="{options}"></div>
个人认为无疑是第一种方法更好,datepicker是一个独立的组件,你并不需要关心他的内部是否操作了dom,是否封装了jQuery插件。
那么什么时候使用指令呢?来看一下浏览器原生提供的指令:
<a title="这是一个指令"></a>
<p title="这是一个指令"></p>
<div title="这是一个指令"></div>
title属性为不同的标签提供tooltip功能,这就是一个指令。一个指令应该表示一个独立的功能,可以为不同的标签和组件提供相同的功能。
未完待续……
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
猜你喜欢
- 先上图片词云图需要模板pip install jiebapip install wordcloud还需要安装另外两个东西这两个我也不太懂借鉴
- 一,斑马线的数据集数据集的构成:testtrainzebra corssing:56zebra corssing:168other:54ot
- 2008年的圣诞节LOGO依旧延续着2007年的圣诞老人、鹿车、红帽子、圣诞树、蜡烛等元素装点。当然,也少不了雪花,但在LOGO设计上,较0
- 给定损失函数的输入y,pred,shape均为bxc。若设定loss_fn = torch.nn.MSELoss(reduction=
- 通配符的分类:%百分号通配符: 表示任何字符出现任意次数 (可以是0次)._下划线通配符:表示只能匹配单个字符,不能多也不能少,就是一个字符
- vue前端项目打包成Docker镜像并运行首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx1.打包vue前端项目生成dist
- 1. mysql_where子句_聚合函数# ### part 单表查询""" select ... from
- 本文实例总结了Python中numpy模块常见用法。分享给大家供大家参考,具体如下:import numpy as nparr = np.a
- 本文实例讲述了php实现xml与json之间的相互转换功能。分享给大家供大家参考,具体如下:用php实现xml与json之间的相互转换:相关
- Pandas的apply函数概念(图解)实例1:怎样对数值按分组的归一化实例2:怎样取每个分组的TOPN数据来源:https://blog.
- 接触pytorch一天,发现pytorch上手的确比TensorFlow更快。可以更方便地实现用预训练的网络提特征。以下是提取一张jpg图像
- 本文实例讲述了wxPython的事件驱动机制,分享给大家供大家参考。具体方法如下:先来看看如下代码:#!/usr/bin/python #
- 1、os.name---判断现在正在实用的平台,Windows返回'nt';linux返回'posix'2、
- 需求 Oracle调用第三方外部程序。Oracle使用sqluldr2快速导出大批量数据,然后用winrar压缩后发送邮件。源码 java
- 本文实例讲述了MySQL切分查询用法。分享给大家供大家参考,具体如下:对于大查询有时需要‘分而治之',将大查询切分为小查询: 每个查
- 提要:作为普通的Python开发者来讲,深入理解object、type不是必要的,但了解他们确实元编程这个词很多朋友都听过,可能用的却不多。
- 本文介绍了Python WEB应用部署的实现方法,分享给大家,具体如下: 使用Apache模块mod_wsgi运行Python WSGI应用
- DELETE 语句DELETE 语句用于删除记录,语法如下:(与 “UPDATE” 语法较为相似)D
- 1,定义和注册中间件在注册的中间件中使用:from django.http import HttpResponseRedirect'
- 本文实例讲述了JS与jQuery判断文本框还剩多少字符可以输入的方法。分享给大家供大家参考,具体如下:javascript部分:functi