vue數據更改后，視圖不更新

問題：使用“=”為數組賦值，賦值后打印數據有變化，但是頁面不更新

原代碼：

//data.是修改的數據，children是數組，為表格顯示數據
this.data.children = []

設置后，在下一行打印，數據確實變成空數組了，但是頁面還是不動~~~~

於是，找到了官方文檔：鏈接在此

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

　　1.當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue

　　2.當你修改數組的長度時，例如：vm.items.length = newLength

舉個例子：


var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將在響應式系統內觸發狀態更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名：

vm.$set(vm.items, indexOfItem, newValue)

為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)

解決辦法：用set代替直接賦值

 this.$set(data, 'children', []);