Vue如何實現(xiàn)數(shù)組更新及過濾排序功能
這篇文章給大家分享的是有關Vue如何實現(xiàn)數(shù)組更新及過濾排序功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為朗縣企業(yè)提供專業(yè)的網(wǎng)站設計制作、成都網(wǎng)站設計，朗縣網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
變異方法
Vue 包含一組觀察數(shù)組的變異方法，它們將會觸發(fā)視圖更新，包含以下方法
push() 接收任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組末尾，并返回修改后數(shù)組的長度
pop() 從數(shù)組末尾移除最后一項，減少數(shù)組的length值，然后返回移除的項
shift() 移除數(shù)組中的第一個項并返回該項，同時數(shù)組的長度減1
unshift() 在數(shù)組前端添加任意個項并返回新數(shù)組長度
splice() 刪除原數(shù)組的一部分成員，并可以在被刪除的位置添加入新的數(shù)組成員
sort() 調(diào)用每個數(shù)組項的toString()方法，然后比較得到的字符串排序，返回經(jīng)過排序之后的數(shù)組
reverse() 用于反轉(zhuǎn)數(shù)組的順序，返回經(jīng)過排序之后的數(shù)組
push
pop
shift
unshift
splice
sort
reverse
非變異方法
變異方法(mutation method)，顧名思義，會改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat(), slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組
concat() 先創(chuàng)建當前數(shù)組一個副本，然后將接收到的參數(shù)添加到這個副本的末尾，最后返回新構建的數(shù)組
slice() 基于當前數(shù)組中一個或多個項創(chuàng)建一個新數(shù)組，接受一個或兩個參數(shù)，即要返回項的起始和結(jié)束位置，最后返回新數(shù)組
map() 對數(shù)組的每一項運行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
filter() 對數(shù)組中的每一項運行給定函數(shù)，該函數(shù)會返回true的項組成的數(shù)組
concat
slice
map
filter
以上操作并不會導致Vue丟棄現(xiàn)有DOM并重新渲染整個列表。Vue實現(xiàn)了一些智能啟發(fā)式方法來最大化DOM元素重用，所以用一個含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作
無法檢測
由于JS的限制， Vue 不能檢測以下變動的數(shù)組：
1、利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
2、修改數(shù)組的長度時，例如： vm.items.length = newLength
setVal
setLength
pop
{{ message }}
有時，要顯示一個數(shù)組的過濾或排序副本，而不實際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過濾或排序數(shù)組的計算屬性
感謝各位的閱讀！關于“Vue如何實現(xiàn)數(shù)組更新及過濾排序功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
重慶分公司
重慶分公司
