1、應該避免在v-for中使用原始值。在Vue中，v-for是一個強大的指令。然而，在v-for中使用原始值通常是不好的。最好使用一個包含原始值的數組。這樣可以避免坑和混亂。

// 不要這樣寫
{{ item }}
// 建議這樣寫
{{ item }}

2、計算屬性中不要改變數據。Vue的計算屬性允許我們以更聲明性的方式聲明我們的計算邏輯，避免代碼冗余。然而，計算屬性存在一個常見的坑是改變原始數據。計算屬性本身不能改變原始數據，否則會導致一些奇怪的行為。所以，務必要小心處理計算屬性中的數據。

// 不要這樣寫
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
const [firstName, lastName] = value.split(' ');
this.firstName = firstName;
this.lastName = lastName;
}
}
}
// 建議這樣寫
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}

3、v-if和v-for不要連用。Vue中v-if和v-for是兩個常用指令。然而，將它們連用的時候容易產生奇怪的行為。如果您同時在同一元素上使用v-if和v-for指令，那么v-for指令會覆蓋v-if指令。

// 不要這樣寫
{{ item.text }}
// 建議這樣寫
{{ item.text }}
computed: {
visibleItems() {
return this.items.filter(item =>item.visible);
}
}

4、在v-for中使用key屬性。v-for是用來循環渲染數組或對象的。然而，有時候我們不想重新渲染整個列表，我們只想更新列表中的某些部分。這時候就需要使用key屬性來解決了。

// 不要這樣寫
{{ item.text }}
// 建議這樣寫
{{ item.text }}

5、Vue組件中的data屬性必須是一個函數。Vue組件是獨立的模塊，因此數據應該是封閉的。如果將data屬性設置為對象，那么在使用多個實例時，所有實例都將共享相同的數據。為此，在Vue組件中的data屬性必須是一個函數。這樣可以確保每個實例都擁有自己的數據。

// 不要這樣寫
Vue.component('my-component', {
data: {
count: 0
}
});
// 建議這樣寫
Vue.component('my-component', {
data() {
return {
count: 0
};
}
});