這篇文章將為大家詳細(xì)講解有關(guān)vue數(shù)據(jù)雙向綁定的注意點(diǎn)有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注于巴宜企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。巴宜網(wǎng)站建設(shè)公司,為巴宜等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

最近一個(gè)vue和element的項(xiàng)目中遇到了一個(gè)問(wèn)題： 動(dòng)態(tài)生成的對(duì)象進(jìn)行雙向綁定是失敗

直接貼代碼：

上面一個(gè)簡(jiǎn)單的element的表單；addClass就是我要將數(shù)據(jù)綁定到的對(duì)象；他初始是一個(gè)空對(duì)象；我需要在其他地方讀取然后給他添加屬性，同時(shí)給表單進(jìn)行綁定。

在這個(gè)過(guò)程中就發(fā)現(xiàn)，雙向綁定失敗了 ， 而且也沒(méi)有報(bào)錯(cuò)。

我是通過(guò)obj.xxx = xxx;這種方法進(jìn)行綁定； 經(jīng)過(guò)測(cè)試發(fā)現(xiàn)雙向綁定并沒(méi)有實(shí)現(xiàn)。

解決方法：

參照 VUE官方文檔： https://cn.vuejs.org/v2/guide/reactivity.html ;

受現(xiàn)代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。例如：

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的

Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上：

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

關(guān)于“vue數(shù)據(jù)雙向綁定的注意點(diǎn)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。