Vue数组更新及过滤排序

变更方法

push()    // 接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop()     // 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
shift()   // 移除数组中的第一个项并返回该项，同时数组的长度减1
unshift() // 在数组前端添加任意个项并返回新数组长度
splice()  // 删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员
sort()    // 调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组
reverse() // 用于反转数组的顺序，返回经过排序之后的数组

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()
    },
}

非变更方法

TIP

1、变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。 2、非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。 3、当使用非变更方法时，可以用新数组替换旧数组

map()    // 对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组
slice()  // 基于当前数组中一个或多个项创建一个新数组，接受一个或两个参数，即要返回项的起始和结束位置，最后返回新数组
concat() // 先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组
filter() // 对数组中的每一项运行给定函数，该函数会返回true的项组成的数组

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); 
        })
    }
}

TIP

以上操作并不会导致Vue丢弃现有DOM并重新渲染整个列表。 Vue实现了一些智能启发式方法来最大化DOM元素重用，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作

无法检测

由于JS的限制， Vue 不能检测以下变动的数组：

• 1、利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
• 2、修改数组的长度时，例如： vm.items.length = newLength

解决方案

以下两种方式都可以实现和 vm.items[indexOfItem]=newValue 相同的效果， 同时也将触发状态更新

// Vue.set
Vue.set(this.items, indexOfItem, newValue)

// Array.prototype.splice
this.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，可以使用 splice

this.items.splice(newLength)

过滤排序

• 有时，要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。
• 在这种情况下，可以创建返回过滤或排序数组的计算属性

computed

data: {
    numbers: [ 1, 2, 3, 4, 5 ],
},
computed: {
    evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
}

methods

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 可以使用一个 method 方法

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

data: {
    numbers: [ 1, 2, 3, 4, 5 ],
  },
methods: {
    even: function (numbers) {
        return numbers.filter(function (number) {
            return number % 2 === 0
        })
    }
}