1. 程式人生 > >vue中的細節(長期更新)

vue中的細節(長期更新)

(一)條件渲染: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} ]