这个系列记录我在一年vue开发中总结的一些经验和技巧。
利用Object.freeze()提升性能
Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。
vue 1.0.18+对其提供了支持,对于data或vuex里使用freeze冻结了的对象,vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。在我的实际开发中,这种提升大约有5~10倍,倍数随着数据量递增。
并且,Object.freeze()冻结的是值,你仍然可以将变量的引用替换掉。举个例子:
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的理念。仅在不得已的时候使用。
合理使用track-by="$index"
track-by是vue为循环提供的优化方法,可以复用多次v-for中id相同的dom。如果你的数据没有一个唯一的id,也可以选择使用track-by="$index",但必须注意一些副作用。
举个例子: