Vue中的数组更新检测

一、数组更新检测简介

Vue的核心是数据与视图的双向绑定，为了监测数组中元素的变化，以便能及时反映到视图中，Vue对数组的中的变异方法进行了相关的包裹，其能够改变原始数组，即相关的变异方法能够很好的实现数据和视图的双向绑定。数组中还存在非变异方法，其不能改变原始数组。

Vue在检测到数组变化时，并不会直接重新渲染整个列表，而是最大化地复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆的使用旧数组，不用担心性能的问题。

二、变异方法

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

三、非变异方法

• filter()
• concat()
• slice()

注：对于非变异方法，若想让Vue帮我们自动更新视图，可以使用新数组来替换原来的数组。

四、特殊情况

当通过下述方法改变数组时，Vue不能检测到：

• 通过索引直接设置数组项或者改变相关数组项的值。
• 修改数组的相关长度。

相关示例：

var vm = new Vue({
  el: "#app",
    data: {
        books: [
            {title: "Vue.js从入门到实战"},
            {title: "JavaScript高级程序设计"},
            {title: "HTML5和CSS3详解"}
        ]
    }
})
//通过索引改变数组
vm.books[0] = {title: "hello world"}
//改变数组长度
vm.books.length = 1

通过以上的方式改变数组并不能让Vue检测到，可以使用以下的方式改变数组，然后让Vue检测到：

//通过Vue的全局set()方法
Vue.set(vm.books, 0, {title: "hello world"})
//通过数组原型的splice()方法
vm.books.splice(0, 1, {title: "hello world"})
//通过Vue实例的$set()方法
vm.$set(vm.books, 0, {title: "hello world"})

通过以上的方法，当数组进行相关的改变后，Vue能够检测到，使其当数据发生改变后，其视图也随之发生相应的改变。