Vue-20、Vue监测数组改变

1、数组调用以下方法Vue可以监测到。

arr.push(); 向数组的末尾追加元素

const array = [1,2,3]
const result = array.push(4)
// array  [1,2,3,4]
// result  4

arr.pop(); 删除末尾的元素

const array = ['a', 'b']
array.pop()  // 'b'
array.pop()  // 'a'
array.pop()  // undefined

array.shift() shift方法删除数组的第一个元素并返回该元素，该方法会改变原数组。

const array = ['a', 'b']
array.shift()  // 'a'
array.shift()  // 'b'
array.shift()  // undefined

arr.unshift() 在数组的开始位置插入一个或者多个元素

const array = [1, 2, 3]
const result = array.unshift('a', 'b')
//result 5
//  array: ['a', 'b', 1, 2, 3]

arr.splice 可以添加和删除及修改数组当中的元素。

var arr = [1,2,3,4,5];

// 添加
arr.splice(0,0,0);// [0,1,2,3,4,5]

// 修改
arr.splice(0,1,23);// [23,1,2,3,4,5]

// 删除
arr.splice(0,1);//[1,2,3,4,5]

arr.sort 排序

const arr = [49, 5, 14, 89, 71, 3, 10];

// 一般写法
arr.sort(function (a, b) {
    return a - b;   // 按照升序排列 
});

// 箭头函数
arr.sort((a, b) => a - b);

// 结果  [3, 5, 10, 14, 49, 71, 89]

arr.reverse（） 数组的项 颠倒顺序 倒叙排列 并不是对数组按照大小排序

	// reverse方法没有参数   原数组改变了 返回的数组也是改变后的数组
    var arr = [4,5,6,3,2,5,4,3,9];
    var arrReturn = arr.reverse();
    
    console.log(arr); //[9, 3, 4, 5, 2, 3, 6, 5, 4]
    console.log(arrReturn); //[9, 3, 4, 5, 2, 3, 6, 5, 4]

2、也可以用Vue.set()修改数组