vuejs的十大最佳实践
1.写入数据时，使用函数返回一个数据对象exportdefault{data(){return{title:'segmentfault'}}}2.使用kebab-case命名自定义事件Name，因为当vue发现事件名称不是这样的命名规则时，会自动转成kebab-case形式3.使用v-for命令时，一定要加上:key属性。如果渲染列表没有key属性，虚拟DOM就无法区分每个元素，也很难检测到每个元素的变化。{{item.name}}
4、:key使用规则：使用唯一id代替数组属性的索引:键的值。因为数组可能会增加或删除元素，此时，索引可能会随着数组的变化而变化。这是非常不稳定的。
{{item.name}} 5.还有一个非常严肃的最佳实践：我们不应该把v-if和v-for一起使用，因为v-for的优先级比v-if高很多。可以看到如下代码：
在这个例子中，Vue会先渲染所有的列表项，然后检测v-if的运行。但是，在现实场景中会有这样的需求，我们应该如何解决呢？我们可以使用computed来过滤掉非主动汽车，代码如下：
exportdefault{computed:{activeCarList(){returnthis.carList.filter(car=>car.isActive)}}}6.对于数据更改，使用computed而不是方法。//使用computed:varvm=newVue({el:'#example',data:{firstName:“John”,lastName:”Doe”},computed:{setFullName:function(){returnthis.firstName+''+this.lastName}}})//Usingmethods:methods:{setFullName:function(){returnthis.firstName+''+this.lastName}}7.v-if可以合并写，然后合并和8.给input元素添加一个key，如下key="username-input"，可以保证在v-if切换时重新渲染input。
9.监听数组和对象变化由于vue2使用Object.defineProperty(data,key,{})监听数据变化，监听存在缺陷。无法监控对象的key增删改查，数组也采用了hack的方式，在数组增删改查函数中进行监控。因此，当需要向数组中添加新元素时，不要这样写：vm.arr[index]=newValue有以下三种写法：Vue.set(vm.arr,index,newValue)vm.arr.splice(index,1,newValue)vm.$set(vm.arr,index,newValue)对象添加新属性，有两种写法：Vue.set(vm.obj,newKey,newValue)vm.$set(vm.obj,newKey,newValue)10.不要混用缩写指令和全写指令v-on:click@click
