Vue 中的列表渲染

2021-09-12 17:03:18 字數 2400 閱讀 1318

let vm = new vue(})

上面是乙個最基礎的列表渲染,在實際開發中,還有很多細節點,為了提公升迴圈的效能,會給迴圈項加乙個唯一的key。我們可以用index作為唯一的key值。

其實不推薦大家這樣使用index的,因為這樣使用index作為key值,在你頻繁操作dom元素時,會比較費效能,無法充分讓 vue 復用dom

不用index作為key值,那用什麼作為key呢?一般來說每個資料都有唯一的乙個id,用它來作為key值就行了。

如下: :key="item.id">//key 值就沒有必要使用 index

} ---- }

let vm = new vue(,,]

}})

列表提高效能,要在每一項上帶乙個key值,key值要唯一,且最好不要用indexkey值。

往列表項裡面新增內容,只需使用push語法就可以了。

vm.list.push()
有時候會這樣寫

vm.list[4] =
這樣寫其實是有問題的,列表雖然更新了,但是頁面卻沒有更新。這是為什麼呢?

當我們嘗試修改陣列內容的時候,不能通過下標的形式來改變這個陣列,我們只能通過vue 提供的幾個陣列變異方法,來運算元組,才能夠實現,資料發生變化,頁面也能發生變化這種效果。

vue 提供了七種資料變異方法,分別是:pushpopshiftunshiftsplicesortreverse

除了使用變異方法,我們還能使用其他方法嗎?改變資料的引用

vm.list = [,,,,]

這時候你會發現,資料變了,頁面也會跟著重新渲染。

如果還有乙個元素需要迴圈,在寫一層迴圈的話,效能肯定會有影響。

:key="item.id">} ---- }

}

let vm = new vue(,,]

}})

很容易就想到,那麼我在外面加一層div不就行了。

:key="item.id">} ---- }

}

let vm = new vue(,,]

}})

這兩段**的區別是,用template渲染的,最外層沒有div,而上面一段,最外層會有乙個div

:key="item.id">} ---- }

}

let vm = new vue(,,]

}})物件的迴圈和陣列一樣,可以通過改變引用方式,更新資料。

除了這種方式之外,那我們還有其他方法更新資料嗎?

全域性方法:vue.set()

let vm = new vue(

}})vue.set(vm.userinfo,'address','beijing') //通過 vue 提供的 set 方法,可以實現,資料更新,頁面更著更新。

除了直接改變資料的引用,還可以利用 vue 提供的set方法去改變資料

例項方法:vm.$set()

vm.$set(vm.userinfo,'address','beijing')    //通過 vue 提供的 set 方法,可以實現,資料更新,頁面更著更新。
如果useriinfo是個陣列,也可以使用set方法

全域性方法:

let vm = new vue(

})vue.set(vm.userinfo,2,44)

例項方法:

vm.$set(vm.userinfo,2,44)

Vue 中的列表渲染

let vm new vue 上面是乙個最基礎的列表渲染,在實際開發中,還有很多細節點,為了提公升迴圈的效能,會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。其實不推薦大家這樣使用index的,因為這樣使用index作為key值,在你頻繁操作dom元素時,會比較費效能,無法充...

Vue 中的列表渲染

let vm new vue 上面是乙個最基礎的列表渲染,在實際開發中,還有很多細節點,為了提公升迴圈的效能,會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。其實不推薦大家這樣使用index的,因為這樣使用index作為key值,在你頻繁操作dom元素時,會比較費效能,無法充...

Vue 中的列表渲染

let vm new vue 上面是乙個最基礎的列表渲染,在實際開發中,還有很多細節點,為了提公升迴圈的效能,會給迴圈項加乙個唯一的key值。我們可以用index作為唯一的key值。其實不推薦大家這樣使用index的,因為這樣使用index作為key值,在你頻繁操作dom元素時,會比較費效能,無法充...