這篇文章主要為大家展示了“vue中修改了數(shù)據(jù)但視圖無法更新怎么辦”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue中修改了數(shù)據(jù)但視圖無法更新怎么辦”這篇文章吧。

我們有時候常碰到vue中明明修改了數(shù)據(jù)，但是視圖無法更新，因此我總結了一點點碰到此類的情況：

1、v-for遍歷的數(shù)組，當數(shù)組內(nèi)容使用的是arr[0].xx =xx更改數(shù)據(jù)，vue無法監(jiān)測到

數(shù)組數(shù)據(jù)變動：我們使用某些方法操作數(shù)組，變動數(shù)據(jù)時，有些方法無法被vue監(jiān)測，有些可以

Vue包裝了數(shù)個數(shù)組操作函數(shù)，使用這些方法操作的數(shù)組去，其數(shù)據(jù)變動時會被vue監(jiān)測：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

vue2.0還增加個方法可以觀測Vue.set(items, indexOfItem, newValue)

filter(), concat(), slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當使用非變異方法時，可以用新數(shù)組替換舊數(shù)組

Vue 不能檢測以下變動的數(shù)組：

① 當你利用索引直接設置一個項時，vm.items[indexOfItem] = newValue

② 當你修改數(shù)組的長度時，例如： vm.items.length = newLength

話不多說，上代碼,并且附上效果圖：

  
   

    
     {{item.name}}-{{index}}
     {{item.age}}-{{index}}
    
   
   click