vue 陣列和物件渲染問題

最近專案有點忙碌，遇到好多問題都沒有總結(╥﹏╥)，在開發過程中，取vuex中的陣列渲染完成之後，再次修改陣列的值，資料更新了，但是檢視並沒有更新。以為是陣列更新的問題，後來又以為是因為vuex導致的問題. 最後強制重新整理元件解決了問題，但是還沒有找到根本問題的所在...

在 vue 中使用陣列的push()、pop()、shift()、unshift()、splice()、sort()、reverse()、filter()、concat()方法時，改變陣列的同時可以觸發檢視的變化。

注意：有兩種情況 vue 無法檢測到變動的陣列，分別是：

（1）直接運算元組的長度；

// vue.set
this.$set(arr, indexofitem, newvalue)
// array.prototype.splice
this.arr.splice(indexofitem, 1, newvalue)

(2)利用索引直接設定乙個項時，例如：this.arr[indexofitem] = newvalue

this.arr.splice(newlength)

demo如下：


}改變列表的值

方法一：this.$set()

方法二：object.assign()

demo.vue


}改變列表的值

補充：

this.$forceupdate()迫使 vue 例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件，而不是所有子元件。

使用 v-if 在切換時，元素及它的繫結資料和元件都會被銷毀並重建