Vue知識點整理

Vue重學

語法

key的重要性

因爲vue循環時不是將dom元素循環創造, 而是一個dom元素重複使用, 而它的diff機制是同層元素進行對比; 以下圖:

如上圖: 對比的原則是 父節點 A 與 父節點 A 對比,下面的子節點與子節點進行對比. 若是右邊的A 節點 變爲 B 節點, 可是B下面的子元素仍是B1, B2, B3. Vue的diff機制會刪除 A節點, 同時連帶下面的子節點也會刪除, 並創造B節點, 再依次建立下面的B1, B2, B3子節點;

若是咱們如圖所示, B1,B2,B3是循環出來的相同dom, 在B1和B2中間加入一個B4節點, 若是沒有設置key屬性時, Vue的機制是將B2改變成B4, 將B3改變成B2, 在建立一個B3節點; 若是有key屬性時, 直接在B1與B2之間插入B4節點就能夠了;

並且索引並不推薦它做爲key, 咱們在進行對數組的數據操做中, 每個數組內的元素的索引是在不斷變化的,所以並不能很絕對的表明一個節點;

v-for與 v-if不要同時出如今一個節點上

建議使用 computed 過濾掉不要顯示的數據後再作循環

this.$forceUpdate() 強制更新組件