vue开发心得和技巧分享


Posted in Javascript onOctober 27, 2016

这个系列记录我在一年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前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 #Javascript
简单模拟node.js中require的加载机制
Oct 27 #Javascript
浅谈jquery中next与siblings的区别
Oct 27 #Javascript
vue多级多选菜单组件开发
Sep 08 #Javascript
使用Javascript监控前端相关数据的代码
Oct 27 #Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 #Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 #Javascript
You might like
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
js word表格动态添加代码
2010/06/07 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
图文详解WinPE下安装Python
2016/05/17 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
护士年终考核评语
2014/12/31 职场文书
捐书仪式主持词
2015/07/04 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技