数组更新检测

一些操作数组的方法，编译会检测，从而会促使视图更新。

变异方法

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

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

替换数组

学了 JavaScript 标准对象库，都知道有些数组方法是不直接改变原数组的，这里称它们为非变异方法，例如：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: ["a", "b", "c"],
  },
});
app.items[1] = "x"; // 不是响应性的
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);