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异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
Underscore源码分析
Dec 30 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php实现可逆加密的方法
2015/08/11 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
javascript实现密码验证
2015/11/10 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python Pillow Image Invert
2019/01/22 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
django 控制页面跳转的例子
2019/08/06 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
入学生会自荐书范文
2014/02/05 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
CAD实训总结范文
2015/08/03 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
python入门之算法学习
2021/04/22 Python
JavaScript异步操作中串行和并行
2021/11/20 Javascript
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers