vue中的細節(長期更新)
阿新 • • 發佈:2018-12-09
(一)條件渲染:v-if 與 v-show:
兩者均用於條件渲染,都可以與”v-else”搭配使用。區別在於使用” v-if “時,如果條件不滿足,被” v-if “包裹的元素不會進行初始化,即DOM結構中沒有插入該標籤包裹的部分;而使用” v-show “條件不滿足時,DOM結構中也會插入對應的內容,並通過設定屬性”display:none”實現元素隱藏。
所以,如果改變了資料使得條件滿足需要顯示時,” v-if “包含的內容會有“區域性編譯與解除安裝”的過程,即” v-if “的渲染是“惰性”的;而使用”v-show”的部分在例項初始化時即使是隱藏的元素也已經被編譯裝載,只是簡單的修改”display”屬性實現切換。
因此,在”v-show”較”v-if”而言有更高的效率,但也需要根據適當的場景進行選擇。
(二)列表渲染:v-for
1、無法觸發檢視更新的行為:
- 直接通過索引修改陣列中的元素;
- 直接修改陣列的長度;
2、在列表迴圈中,如果陣列中有唯一的標識,我們可以使用”track-by”屬性為陣列設定唯一標識,這樣在迴圈渲染的過程中會盡可能的重用原有物件的作用域和DOM元素,提高效能;在vue2.0中即key屬性。如下:
<li v-for"item in items" :key="item.id">{item.name}</li>
items : [
{'id' : 1,'name': a},
{'id': 2,'name': b}
]