數組數據變動：我們使用某些方法操作數組，變動數據時，有些方法無法被vue監測，有些可以
- Vue包裝了數個數組操作函數，使用這些方法操作的數組去，其數據變動時會被vue監測：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- vue2.0還增加個方法可以觀測Vue.set(items, indexOfItem, newValue)
- filter(), concat(), slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組
- Vue 不能檢測以下變動的數組：
- ① 當你利用索引直接設置一個項時，vm.items[indexOfItem] = newValue
- ② 當你修改數組的長度時，例如： vm.items.length = newLength
話不多說，上代碼,並且附上效果圖：
1 <body> 2 <div id="app"> 3 <ul> 4 <li v-for="(item,index) in gc"> 5 <span>{{item.name}}-{{index}}</span> 6 <span>{{item.age}}-{{index}}</span> 7 </li> 8 </ul> 9 <button @click="add">click</button> 10 </div> 11 <script> 12 new Vue({ 13 el:'#app', 14 data:{ 15 gc:[ 16 {name:'zhangsan',age:10}, 17 {name:'lisi',age:21}, 18 {name:'wangwu',age:22}, 19 {name:'wangwu',age:22} 20 ] 21 },methods:{ 22 // 當點擊事件觸發時候會修改掉gc[0]的值為lisi,但是視圖不會發生變化 23 add(){ 24 this.gc[0] ={name:'lisi',age:22} 25 } 26 } 27 }) 28 </script> 29 </body>
以上Vue 不能檢測數據變動的數組的2種方式解決辦法
將代碼中的add()方法改為:
add(){
// this.gc[0] ={name:'lisi',age:22} //這樣直接修改不能被vue監聽到
Vue.set(this.gc,0,{name:'lisi',age:22}) //這樣就能被vue監控到，更新視圖
}
vue官網給的官方解釋
