欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue對象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決

 更新時(shí)間：2024年07月25日 17:22:36   作者：竹立荷塘  
這篇文章主要介紹了vue對象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue對象或數(shù)組中數(shù)據(jù)變化但視圖沒更新

由于 JavaScript 的限制，Vue 不能檢測數(shù)組和對象的變化。

但是我們還是有一些辦法來回避這些限制并保證它們的響應(yīng)性。

一、對于對象

**Vue 無法檢測 property 的添加或移除。

由于 Vue 會在初始化實(shí)例時(shí)對 property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。

例如：

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是響應(yīng)式的

vm.b = 2
// `vm.b` 是非響應(yīng)式的

對于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動態(tài)添加根級別的響應(yīng)式 property。

但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應(yīng)式 property。

例如，對于：

Vue.set(vm.someObject, 'b', 2)

您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：

this.$set(this.someObject,'b',2)

有時(shí)你可能需要為已有對象賦值多個新 property，比如使用 Object.assign() 或 _.extend()。

但是，這樣添加到對象上的新 property 不會觸發(fā)更新。

在這種情況下，你應(yīng)該用原對象與要混合進(jìn)去的對象的 property 一起創(chuàng)建一個新的對象。

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

二、對于數(shù)組

Vue 不能檢測以下數(shù)組的變動：

  • 當(dāng)你利用索引直接設(shè)置一個數(shù)組項(xiàng)時(shí)，例如：
vm.items[indexOfItem] = newValue
  • 當(dāng)你修改數(shù)組的長度時(shí)，例如：
vm.items.length = newLength

舉個例子：

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

為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：

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

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

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

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

vm.items.splice(newLength)

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論