这个系列记录我在一年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前端组件学习好代码教程》,欢迎大家学习阅读。
到此这篇关于vue开发心得和技巧分享就介绍到这了。晋升自己的心理承受力,做到气量气度宽大旷达,不为小事所累,让自己尽快成熟起来。更多相关vue开发心得和技巧分享内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!