Vue數(shù)組更新及過(guò)濾排序功能

更新時(shí)間：2017年08月10日 15:49:10 作者：小火柴的藍(lán)色理想

Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個(gè)數(shù)組的過(guò)濾或排序的副本。本文將詳細(xì)介紹Vue數(shù)組更新及過(guò)濾排序

前面的話

　　Vue為了增加列表渲染的功能，增加了一組觀察數(shù)組的方法，而且可以顯示一個(gè)數(shù)組的過(guò)濾或排序的副本。本文將詳細(xì)介紹Vue數(shù)組更新及過(guò)濾排序

變異方法

　　Vue 包含一組觀察數(shù)組的變異方法，它們將會(huì)觸發(fā)視圖更新，包含以下方法

push() 接收任意數(shù)量的參數(shù)，把它們逐個(gè)添加到數(shù)組末尾，并返回修改后數(shù)組的長(zhǎng)度

pop() 從數(shù)組末尾移除最后一項(xiàng)，減少數(shù)組的length值，然后返回移除的項(xiàng)

shift() 移除數(shù)組中的第一個(gè)項(xiàng)并返回該項(xiàng)，同時(shí)數(shù)組的長(zhǎng)度減1

unshift() 在數(shù)組前端添加任意個(gè)項(xiàng)并返回新數(shù)組長(zhǎng)度

splice() 刪除原數(shù)組的一部分成員，并可以在被刪除的位置添加入新的數(shù)組成員

sort() 調(diào)用每個(gè)數(shù)組項(xiàng)的toString()方法，然后比較得到的字符串排序，返回經(jīng)過(guò)排序之后的數(shù)組

reverse() 用于反轉(zhuǎn)數(shù)組的順序，返回經(jīng)過(guò)排序之后的數(shù)組

<div id="example">
 <div>
 <button @click='push'>push</button>
 <button @click='pop'>pop</button>
 <button @click='shift'>shift</button>
 <button @click='unshift'>unshift</button>
 <button @click='splice'>splice</button>
 <button @click='sort'>sort</button>
 <button @click='reverse'>reverse</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item.message }}
 </li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 items: [
  {message: 'Foo' },
  {message: 'Bar' },
  {message: 'Baz' }
 ],
 addValue:{message:'match'}
 },
 methods:{
 push(){
  this.items.push(this.addValue)
 },
 pop(){
  this.items.pop()
 },
 shift(){
  this.items.shift()
 },
 unshift(){
  this.items.unshift(this.addValue)
 },
 splice(){
  this.items.splice(0,1)
 },
 sort(){
  this.items.sort()
 },
 reverse(){
  this.items.reverse()
 },
 }
})
</script>

非變異方法

　　變異方法(mutation method)，顧名思義，會(huì)改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat(), slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組

concat() 先創(chuàng)建當(dāng)前數(shù)組一個(gè)副本，然后將接收到的參數(shù)添加到這個(gè)副本的末尾，最后返回新構(gòu)建的數(shù)組

slice() 基于當(dāng)前數(shù)組中一個(gè)或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組，接受一個(gè)或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置，最后返回新數(shù)組

map() 對(duì)數(shù)組的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組

filter() 對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，該函數(shù)會(huì)返回true的項(xiàng)組成的數(shù)組

<div id="example">
 <div>
 <button @click='concat'>concat</button>
 <button @click='slice'>slice</button>
 <button @click='map'>map</button>
 <button @click='filter'>filter</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item }}
 </li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 addValue:'match'
 },
 methods:{
 concat(){
  this.items = this.items.concat(this.addValue)
 },
 slice(){
  this.items = this.items.slice(1)
 },
 map(){
  this.items = this.items.map(function(item,index,arr){
  return index + item; 
  })
 },
 filter(){
  this.items = this.items.filter(function(item,index,arr){
  return (index > 0); 
  })
 }
 }
})
</script>

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

無(wú)法檢測(cè)

　　由于JS的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

　　1、利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue

　　2、修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength

<div id="example">
 <div>
 <button @click='setVal'>setVal</button>
 <button @click='setLength'>setLength</button>
 <button @click='pop'>pop</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>

<script>
var watchFunc = function(){
 example.message = '數(shù)據(jù)發(fā)生變化';
 setTimeout(function(){
 example.message = '';
 },500); 
}
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 message:'',
 },
 watch:{
 items:watchFunc
 },
 methods:{
 pop(){
  this.items.pop()
 },
 setVal(){
  this.items[0]= 'match';
 },
 setLength(){
  this.items.length = 2;
 }
 }
})
</script>

　　以上代碼中，直接設(shè)置值和長(zhǎng)度使用watch不能檢測(cè)到變化

　　以下兩種方式都可以實(shí)現(xiàn)和vm.items[indexOfItem]=newValue相同的效果，同時(shí)也將觸發(fā)狀態(tài)更新

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

　　為了解決第二類問(wèn)題，可以使用 splice

example1.items.splice(newLength)

<div id="example">
 <div>
 <button @click='setVal1'>setVal1</button>
 <button @click='setVal2'>setVal2</button>
 <button @click='setLength'>setLength</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>

<script>
var watchFunc = function(){
 example.message = '數(shù)據(jù)發(fā)生變化';
 setTimeout(function(){
 example.message = '';
 },500); 
}
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 message:'',
 },
 watch:{
 items:watchFunc
 },
 methods:{
 setVal1(){
  Vue.set(this.items, 0, 'match')
 },
 setVal2(){
  this.items.splice(1, 1, 'xiaohuochai')
 }, 
 setLength(){
  this.items.splice(2)
 }
 }
})
</script>

過(guò)濾排序

　　有時(shí)，要顯示一個(gè)數(shù)組的過(guò)濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過(guò)濾或排序數(shù)組的計(jì)算屬性

【computed】

<div id="example">
 <ul>
 <li v-for="n in evenNumbers">{{ n }}</li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 numbers: [ 1, 2, 3, 4, 5 ],
 },
 computed: {
 evenNumbers: function () {
  return this.numbers.filter(function (number) {
  return number % 2 === 0
  })
 }
 }
})
</script>

【methods】

　　在計(jì)算屬性不適用的情況下 (例如，在嵌套 v-for 循環(huán)中) 可以使用一個(gè) method 方法

<div id="example">
 <ul>
 <li v-for="n in even(numbers)">{{ n }}</li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 numbers: [ 1, 2, 3, 4, 5 ],
 },
 methods: {
 even: function (numbers) {
  return numbers.filter(function (number) {
  return number % 2 === 0
  })
 }
 }
})
</script>