Vue遇到的注意點總結-1

Vue遇到的注意點-1

1.vue無法檢測數組項的修改

通過索引更改數組中某一項時不會觸發刷新

this.items[3] = {'message':'update'};//不會觸發更新

解決方式:
1.使用Vue.set()方法
2.通過splice()方法的第三個參數修改內容

2.vue無法檢測數組長度的修改

直接修改數組length屬性不會觸發刷新

this.items.length = 2

解決方式:
使用splice方法

this.items.splice(2)
3.注意html標籤嵌套規則

例如ul的下級應該是li而不是其他標籤

4.不要使用template作爲組件標籤名

使用‘template’作爲組件標籤名是無效的

5.每個組件都需要有根元素

組件若是有多個標籤,應該用一個根元素去包括他們
例:
<div> <p></p> <p></p> <p></p> </div>

6.子組件的data使用函數的方式定義

定義方式分公有和私有
格式:
私有:

data:function(){
	return {name:doggi}
}

公有:

var data = {name:doggi}//這句在組件外定義
data:function(){
	return data;
}
7.v-for的優先級比v-if更高

一個標籤裏同時存在v-for和v-if時,先執行for循環,再對循環的每一項做if判斷

8.儘可能使用v-for來提供 key
<div v-for='item in items' :key='item.id'>
9.不應該使用箭頭函數來定義methods函數
10.computed中定義的函數只有依賴關係發生改變時才觸發渲染,否則返回緩存上次結果
11.v-text不會渲染html標籤

以文本的形式原樣輸出。需要渲染標籤請使用v-html

12.使用v-pre指定不需要渲染的元素,減少編譯時間
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章