最近項目有點忙碌，遇到好多問題都沒有總結(╥﹏╥)，在開發過程中，取vuex中的數組渲染完成之后，再次修改數組的值，數據更新了，但是視圖并沒有更新。以為是數組更新的問題，后來又以為是因為vuex導致的問題. 最后強制刷新組件解決了問題，但是還沒有找到根本問題的所在...

數組更新檢測

在 vue 中使用數組的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法時，改變數組的同時可以觸發視圖的變化。 注意： 有兩種情況 vue 無法檢測到變動的數組，分別是：

（1）直接操作數組的長度；

// Vue.setthis.$set(arr, indexOfItem, newValue)// Array.prototype.splicethis.arr.splice(indexOfItem, 1, newValue)

(2)利用索引直接設置一個項時，例如：this.arr[indexOfItem] = newValue

this.arr.splice(newLength)

demo如下：

<template> <div class="demo"> <div class="list-item" v-for="item in arr[0].elements" :key="item.name">{{item.name}}</div> <div class="change-btn" @click="changeArr">改變列表的值</div> </div></template><script> export default { data() {  return {  index: 0,  arr: [{   elements: [{   name: '0'   }, {   name: '1'   }, {   name: '2'   }]  }]   } }, methods: {  changeArr() {  // 可以改變數組的值   this.arr[0].elements.push({   name: '3'   })  // this.arr[0].elements[1].name = '4' 可以改變數組的值  // this.arr[0].elements[1] = { 無法改變數組的值  // name: '4'  // }  } } }</script>

問題： 用v-for循環渲染數組數據時，數據更新了，視圖卻沒有更新

由于 JavaScript 的限制， Vue 不能檢測以下變動的數組：

1. 當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如： vm.items.length = newLength

解決方法：

為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果， 同時也將觸發狀態更新：

// Vue.setVue.set(example1.items, indexOfItem, newValue) （數組， 所引， 值） // Array.prototype.splice`example1.items.splice(indexOfItem, 1, newValue) （所引， 長度， 值） 

避免第二種情況，使用 splice：

example1.items.splice(newLength) 

對象更新檢測

方法一：this.$set()

方法二：Object.assign()

demo.vue

<template> <div class="demo"> {{object}} <div class="change-btn" @click="changeArr">改變列表的值</div> </div></template><script> export default { data() {  return {  index: 0,  object: {   name: 'haha'  }  } }, methods: {  changeArr() {  // 方法一：    this.$set(this.object, 'age', 27)  // 方法二：   this.object = Object.assign({}, this.object, {   age: 27   })  // 方法三： ---不可行   this.object.age = '27'  } } } </script>