常用的操作数组的方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

上面这些数组操作方法，会直接改变原始数组称为变异方法，会促使视图自动更新。

而有些数组方法是不直接改变原数组的，这里称它们为非变异方法，例如：filter()、slice()、concat() ，它们都是返回一个新数组，那么，在 Vue 中使用到这些方法，怎么样才能促使视图更新呢？我们就必须使用数组替换法，将非变异方法返回的新数组直接赋值给的旧数组。

this.nav = this.nav.slice(1, 4);

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

1. 当你利用索引直接设置一个项时，例如：

   vm.items[indexOfItem] = newValue
   

2. 当你修改数组的长度时，例如：

   vm.items.length = newLength

   举个例子：

var app = new Vue({
  data: {
    items: ["苹果", "香蕉", "菠萝"],
  },
});
app.items[1] = "水蜜桃"; // 不是响应性的
app.items.length = 2; // 不是响应性的

上去直接这样改值操作是没有问题的，但这并不是响应式的，并不能触发视图更新，需要用其他方法代替。

那么有什么办法可以替代呢？  例如这样的操作 

app.items[indexOfItem] = newValue 

可以用以下两种代替：

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