form表單數據回顯雙向綁定失效的原因

最近看vue源碼分析類的文章，斷斷續續的看着，時不時發現一些以前沒注意的一些點。

正好前段時間寫項目時突然發現有時候用element-UI的表單時，在一個彈框里，數據回顯，最開始表單綁定的對象是空對象，然后我直接給表單的數據指定了哪些字段賦值，然后在修改表單內容時，發現怎么輸入不進去呢，像是雙向綁定失效了。類型下面這種寫法

export default {
    data () {
        return {
            form: {}
        }
    },
      methods: {
            editPop () {
              this.form.selectType = 0
          }
     }            

 

當時沒多想，直接給最開始的空對象里添加了那幾個要顯示的字段，然后再賦值，就可以正常輸入了，即可以實現雙向綁定了。

當時不明白什么原因，還以為是element的bug，今天看vue源碼解析的文章時，作者的一句話讓我想明白了出現上述問題的原因：對於使用 Object.defineProperty 實現響應式的對象，當我們去給這個對象添加一個新的屬性的時候，是不能夠觸發它的 setter 的。

一開始我的表單存儲的對象是空對象，然后我指定給對象里的屬性的時候，這些屬性是之前沒有的，所以就不能觸發setter。所以才有了$set這個方法，通過$set可以新增一個響應式的屬性，就可以實現雙向綁定了。

以前沒有注意到這個問題，現在明白了，總算是知其所以然了