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