Vue中v-for更新检测的操作方法

口诀：

数组变更方法，就会导致 v-for 更新，页面更新 数组非变更方法：返回新数组，就不会导致 v-for 更新，更新值检测不到可采用覆盖或者 this.$set()

数组变更方法如下：

1. arr.push()从后面添加元素

arr.push(5)

2. arr.pop()从后面删除元素，只能是一个

arr.pop()

3. arr.shift()从前面删除元素，只能删除一个

arr.shift()

4. arr.unshift()从前面添加元素，返回值时添加完后数组长度

arr.unshift(8)

5. arr.splice(i,n)删除从 i (索引值)开始之后删除的 N(删除的个数)个数

let arr = [1,2,3,4,5]console.log(arr.splice(2,2))     //[3,4]console.log(arr)    // [1,2,5]

6. arr.sort()将数组进行排序，返回值排好的数组

let arr = [2,10,6,1,4,22,3]console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]let arr1 = arr.sort((a, b) =>a - b)  console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]let arr2 = arr.sort((a, b) =>b-a)  console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

7. arr.reverse()"(val, index) in arr" :key="index"> {{ val }} </li> <button @click="sliceBtn">截取前3个</button> sliceBtn(){ // 2. 数组slice方法不会造成v-for更新 // slice不会改变原始数组 // this.arr.slice(0, 3) // 解决v-for更新 - 覆盖原始数组 let newArr = this.arr.slice(0, 3) this.arr = newArr },

this.$set()方法

<li v-for="(val, index) in arr" :key="index">     {{ val }}   </li>   <button @click="sliceBtn">更新下标0的值</button>      sliceBtn(){   // 更新某个值时，v-for是检测不到的   // this.arr[0] = 1000      // 解决- this.$set()   // 参数1：更新目标结构   // 参数2：更新位置   // 参数3：更新值   let newArr = this.arr.slice(0, 3)   this.arr = newArr },