vue不能檢測動態更新的數據

對於常用的v-for當采用一下變化數據，是不能被vue檢測到，視圖不會刷新

 

一. 數組數據變化

由於 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 // 不是響應性的

解決辦法：

第一種：

// 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)
vm.items.splice(newLength)

 

二. 對象數據變更檢測

還是由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

對於已經創建的實例，Vue 不允許動態添加根級別的響應式屬性。

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是響應式的

vm.b = 2
// `vm.b` 不是響應式的

解決辦法：

可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
// 你可以添加一個新的 age 屬性到嵌套的 userProfile 對象：

Vue.set(vm.userProfile, 'age', 27)
// 你還可以使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：

vm.$set(vm.userProfile, 'age', 27)

有時你可能需要為已有對象賦值多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性:

// 不要像這樣：
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
//你應該這樣做：
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})