vue开发心得和技巧分享
这个系列记录我在一年vue开发中总结的一些经验和技巧。
利用Object.freeze()提升性能
Object.freeze()是ES5新增的特性，可以冻结一个对象，防止对象被修改。
vue1.0.18+对其提供了支持，对于data或vuex里使用freeze冻结了的对象，vue不会做getter和setter的转换。
如果你有一个巨大的数组或Object，并且确信数据不会修改，使用Object.freeze()可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。
并且，Object.freeze()冻结的是值，你仍然可以将变量的引用替换掉。举个例子：
<pv-for="iteminlist">{{item.value}}</p>
newVue({
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的理念。仅在不得已的时候使用。
newVue({
data:{
value:'demo'
},
created(){
letdom=document.createElement('div');
dom.innerHTML='{{value}}';
this.$compile(dom);
}
})
合理使用track-by="$index"
track-by是vue为循环提供的优化方法，可以复用多次v-for中id相同的dom。如果你的数据没有一个唯一的id，也可以选择使用track-by="$index"，但必须注意一些副作用。
举个例子:
newVue({
data:{
list:[1,2,3]
}
})
<divid="demo-1">
<pv-for="iteminlist">{{item}}</p>
</div>
<divid="demo-2">
<pv-for="iteminlist"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-->
<divv-datepicker="{options}"></div>
个人认为无疑是第一种方法更好，datepicker是一个独立的组件，你并不需要关心他的内部是否操作了dom，是否封装了jQuery插件。
那么什么时候使用指令呢？来看一下浏览器原生提供的指令：
<atitle="这是一个指令"></a> <ptitle="这是一个指令"></p> <divtitle="这是一个指令"></div>
title属性为不同的标签提供tooltip功能，这就是一个指令。一个指令应该表示一个独立的功能，可以为不同的标签和组件提供相同的功能。
未完待续……
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。