Vue 数组修改动态渲染

        在使用Vue过程中，经常遇到调用接口重新渲染数组，且更新后的数组信息需要重新渲染至页面中，最经典的案例就是分页器分页重新渲染

        由于javascript的限制，Vue不能检测到直接赋值的行为，即该数组非响应式数据，例如：

this.list = [1,2,3];
this.list[0] = 1;
this.list[1].attr = newValue;
this.list.length = newLength;

解决方案：

使用Vue提供的方法对数组进行修改操作

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push() 往数组最后面添加一个元素，成功返回当前数组的长度

pop() 删除数组的最后一个元素，成功返回删除元素的值

shift() 删除数组的第一个元素，成功返回删除元素的值

unshift() 往数组最前面添加一个元素，成功返回当前数组的长度

splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值

sort() 使数组按照字符编码默认从小到大排序，成功返回排序后的数组

reverse() 将数组倒序，成功返回倒序后的数组

set() 可用于设置元素值及其属性值：

import Vue from "vue";
Vue.$set(要操作的对象或数组, 要新增或者修改的数组或对象key, 对应的值)

在实际中常见的需求为替换整个数组，目前还没有较好的解决方案，只能用笨法子，大家可以交流下：

getListBycolumnIdAndSubId(this.parameter).then((res) => {
 let list = res.data.extend.list; 
 this.menuList.splice(0); // 将原数组清空
 for(let i = 0; i < list.length; i++){ // 遍历渲染新数据
    Vue.set(this.menuList, i, list[i])
 }
 this.total = res.data.extend.total;
})