- Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性。也就是說創建過后，data中不允許添加根數據
1. 對對象處理
- Vue可以檢測到對象屬性的修改，不能檢測到對象屬性的添加和刪除，也就是說這種方式處理后，vue不能檢察到數據變化，不能進行渲染更新，Vue可以使用Vue.set 和 Vue.delete實現
- Vue.set
Vue.set 方法用於設置對象的屬性，它可以解決 Vue 無法檢測添加屬性的限制，語法格式如下：
Vue.set( target, key, value )
- Vue.delete
Vue.delete 用於刪除動態添加的屬性 語法格式：
Vue.delete( target, key )
2. 對數組的處理
- vue中的被包裝的觀察數組能夠觸發視圖更新
- 有push(),pop(),shift(),unshift(),splice(),sort(),reverse()
- 不能檢測到下面數組變化：
1）直接用索引設置屬性，如 vm.item[0] = { }
2）修改數組長度，如vm.items.length = 0 - 用$set
Vue 包含一組觀察數組的變異方法，它們將會觸發視圖更新，包含以下方法：
push() 接收任意數量的參數，把它們逐個添加到數組末尾，並返回修改后數組的長度
pop() 從數組末尾移除最后一項，減少數組的length值，然后返回移除的項
shift() 移除數組中的第一個項並返回該項，同時數組的長度減1
unshift() 在數組前端添加任意個項並返回新數組長度
splice() 刪除原數組的一部分成員，並可以在被刪除的位置添加入新的數組成員
sort() 調用每個數組項的toString()方法，然后比較得到的字符串排序，返回經過排序之后的數組
reverse() 用於反轉數組的順序，返回經過排序之后的數組
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' },
{message: 'Baz' }
],
addValue:{message:'zyb'}
},
methods:{
push(){
this.items.push(this.addValue)
},
pop(){
this.items.pop()
},
shift(){
this.items.shift()
},
unshift(){
this.items.unshift(this.addValue)
},
splice(){
this.items.splice(0,1)
},
sort(){
this.items.sort()
},
reverse(){
this.items.reverse()
},
}
})
變異方法與非變異方法
變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異(non-mutating method)方法，例如：map(), filter(), concat(), slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組。同樣頁面會重新渲染
以下兩種方式都可以實現和vm.items[indexOfItem]=newValue相同的效果， 同時也將觸發狀態更新
concat() 先創建當前數組一個副本，然后將接收到的參數添加到這個副本的末尾，最后返回新構建的數組。
slice() 基於當前數組中一個或多個項創建一個新數組，接受一個或兩個參數，即要返回項的起始和結束位置，最后返回新數組。
map() 對數組的每一項運行給定函數，返回每次函數調用的結果組成的數組、
filter() 對數組中的每一項運行給定函數，該函數會返回true的項組成的數組
3.注意
$set()方法更新時，頁面會全部更新一遍，包括其他數據
某個數據更新，會更新渲染所有數據