Vue列表渲染是怎樣的

Vue列表渲染是怎樣的，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

　　變異方法(mutationmethod)，顧名思義，會改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異(non-mutatingmethod)方法，例如：filter(),concat()和slice()。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組：

　　example1.items=example1.items.filter(function(item){returnitem.message.match(/Foo/)})
 
　　<divid="example">
 
　　<div>
 
　　<button@click="concat()">concat</button>
 
　　<button@click="slice()">slice</button>
 
　　<button@click="filter()">filter</button>
 
　　</div>
 
　　<ul>
 
　　<liv-for="iteminitems">
 
　　{{item.list}}
 
　　</li>
 
　　</ul>
 
　　</div>
 
　　<script>
 
　　varexample=newVue({
 
　　el:"#example",
 
　　data:{
 
　　items:[
 
　　{list:5},
 
　　{list:6},
 
　　{list:7}
 
　　],
 
　　addValue:{list:10}
 
　　},
 
　　methods:{
 
　　concat(){
 
　　this.items=this.items.concat(this.addValue)
 
　　},
 
　　slice(){
 
　　this.items=this.items.slice(1)
 
　　},
 
　　filter(){
 
　　this.items=this.items.filter(function(item,index,arr){
 
　　return(index>0)
 
　　})
 
　　}
 
　　}
 
　　})

　　以上操作并不會導致Vue丟棄現(xiàn)有DOM并重新渲染整個列表。Vue實現(xiàn)了一些智能啟發(fā)式方法來最大化DOM元素重用，所以用一個含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作

　　注意事項

　　由于JavaScript的限制，Vue不能檢測以下變動的數(shù)組：

　　當你利用索引直接設置一個項時，例如：

　　vm.items[indexOfItem]=newValue

　　當你修改數(shù)組的長度時，例如：

　　vm.items.length=newLength

　　為了解決第一類問題，以下兩種方式都可以實現(xiàn)和vm.items[indexOfItem]=newValue相同的效果，同時也將觸發(fā)狀態(tài)更新：

　　//Vue.set

　　Vue.set(example1.items,indexOfItem,newValue)

　　//Array.prototype.splice

　　example1.items.splice(indexOfItem,1,newValue)

　　為了解決第二類問題，你可以使用splice：

　　example1.items.splice(newLength)

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

關于Vue列表渲染是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業(yè)資訊頻道了解更多相關知識。