1、写data的时候,用function返回一个data对象
export default {
data() {
return {
title: 'segmentfault'
}
}
}
2、用kebab-case命名自定义事件的名称,因为当vue发现事件名称不是这种名称规定的时候,在起外部是会被主动转换成kebab-case模式的
<button @click="$emit('increase-num', 1)" ></button>
<counter @increase-num="increasseNum"></counter>
3、在用v-for指令的时候,肯定要加上:key属性。如果渲染列表没有key属性,虚构DOM就无奈辨别每个元素,就很难检测每个元素的变动。
<div v-for="item in items" :key="item.id">{{item.name}}</div>
4、:key应用规定:用一个举世无双的id而不是数组的index来做属性:key的值。因为,数组有可能会被add或delete元素,此时,index可能就会随着数组的变动而变动。这样很不稳固。
<div v-for="item in items" :key="item.id">{{item.name}}</div>
5、还有一个十分庄重的最佳实际:咱们不应该把v-if和v-for一起用,因为v-for的优先级比v-if高很多。能够看如下代码:
<ul>
<li
v-for="car in carList"
:key="car.number"
v-if="car.isActive"
></li>
</ul>
在这个例子里,vue会先把所有的list item都渲染进去,而后再检测v-if的操作。然而,事实场景中又会呈现这样的须要,咱们应该如何解决呢?咱们能够用computed过滤掉不是active的car,代码如下:
<ul>
<li
v-for="car in activeCarList"
:key="car.number"
></li>
</ul>
export default {
computed: {
activeCarList() {
return this.carList.filter(car => car.isActive)
}
}
}
6、数据变动,用computed,不要用methods。
// Using computed:
var vm = new Vue({
el: ‘#example’,
data: {
firstName: “John”,
lastName:”Doe”
},
computed: {
setFullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
})
// Using methods:
methods: {
setFullName: function () {
return this.firstName + ‘ ‘ + this.lastName
}
}
7、v-if能合并写就合并写
8、给input元素加key,如下key=“username-input”
,能保障在v-if切换中,input从新渲染。
<template v-if=“loginType === ‘username'”>
<label>Username</label>
<input placeholder=“Enter your username” key=“username-input”>
</template>
<template v-else>
<label>Email</label>
<input placeholder=“Enter your email address” key=“email-input”>
</template>
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
发表回复