vue數據雙向綁定的注意點有哪些

這篇文章將為大家詳細講解有關vue數據雙向綁定的注意點有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

最近一個vue和element的項目中遇到了一個問題： 動態生成的對象進行雙向綁定是失敗

直接貼代碼：

 <el-form :model="addClass" :rules="rules" ref="addClass">
   <el-form-item label="表單分類名稱" prop="NAME" :label-width="formLabelWidth">
      <el-input v-model="addClass.NAME" auto-complete="off"></el-input>
   </el-form-item>
   <el-form-item label="表單分類描述" prop="DESCRIBE" :label-width="formLabelWidth">
      <el-input type="textarea" autosize row=5 v-model="addClass.DESCRIBE" auto-complete="off"></el-input>
   </el-form-item>
 </el-form>

上面一個簡單的element的表單；addClass就是我要將數據綁定到的對象；他初始是一個空對象；我需要在其他地方讀取然后給他添加屬性，同時給表單進行綁定。

在這個過程中就發現，雙向綁定失敗了 ， 而且也沒有報錯。

我是通過obj.xxx = xxx;這種方法進行綁定； 經過測試發現雙向綁定并沒有實現。

解決方法：

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

受現代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。例如：

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

Vue 不允許在已經創建的實例上動態添加新的根級響應式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上：

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

關于“vue數據雙向綁定的注意點有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。