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 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
微信小程序上传图片实例
May 28 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP实现验证码校验功能
2017/11/16 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
angular动态表单制作
2018/02/23 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python中元类用法实例
2014/10/10 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
春节活动策划方案
2014/01/24 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
毕业生自荐书
2014/02/03 职场文书
大型会议接待方案
2014/03/01 职场文书
对孩子的寄语
2014/04/09 职场文书
学生安全责任书
2014/04/15 职场文书
婚纱店策划方案
2014/05/22 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
花木兰观后感
2015/06/10 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android