vue更改了資料但是視圖卻沒有更新

轉載：原位址：https://blog.csdn.net/wu_xianqiang/article/details/80285944

數組更新檢測

數組有一些方法可以導緻視圖更新

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

替換數組： 例如：

filter()

, 

concat()

 和 

slice()

。這些不會改變原始數組，但總是傳回一個新數組。可以用新數組替換舊數組，你可能認為這将導緻 Vue 丢棄現有 DOM 并重新渲染整個清單。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大範圍的重用而實作了一些智能的、啟發式的方法，是以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

注意事項

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

為了解決第一類問題，以下兩種方式都可以實作和 

vm.items[indexOfItem] = newValue

 相同的效果，同時也将觸發狀态更新：

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

• 1
• 2
• 3
• 4

你也可以使用 

vm.$set

 執行個體方法，該方法是全局方法 

Vue.set

 的一個别名：

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

• 1

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

splice

：

vm.items.splice(newLength)
           

• 1

對象更改檢測注意事項

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

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

對于已經建立的執行個體，Vue 不能動态添加根級别的響應式屬性。但是，可以使用 

Vue.set(object, key, value)

 方法向嵌套對象添加響應式屬性。例如，對于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
           

• 1
• 2
• 3
• 4
• 5
• 6
• 7

你可以添加一個新的 

age

 屬性到嵌套的 

userProfile

 對象：

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

• 1

你還可以使用 

vm.$set

 執行個體方法，它隻是全局 

Vue.set

 的别名：

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

• 1

有時你可能需要為已有對象賦予多個新屬性，比如使用 

Object.assign()

 或 

_.extend()

。在這種情況下，你應該用兩個對象的屬性建立一個新的對象。是以，如果你想添加新的響應式屬性，不要像這樣：

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
           

• 1
• 2
• 3
• 4

你應該這樣做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})