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 相关文章推荐
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js null undefined 空区别说明
2010/06/13 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
初识Node.js
2015/03/20 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue实现折线图 可按时间查询
2020/08/21 Javascript
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python