form表单数据回显双向绑定失效的原因

最近看vue源码分析类的文章，断断续续的看着，时不时发现一些以前没注意的一些点。

正好前段时间写项目时突然发现有时候用element-UI的表单时，在一个弹框里，数据回显，最开始表单绑定的对象是空对象，然后我直接给表单的数据指定了哪些字段赋值，然后在修改表单内容时，发现怎么输入不进去呢，像是双向绑定失效了。类型下面这种写法

 1 export default {
 2     data () {
 3         return {
 4             form: {}
 5         }
 6     },
 7       methods: {
 8             editPop () {
 9               this.form.selectType = 0
10           }
11      }

当时没多想，直接给最开始的空对象里添加了那几个要显示的字段，然后再赋值，就可以正常输入了，即可以实现双向绑定了。

当时不明白什么原因，还以为是element的bug，今天看vue源码解析的文章时，作者的一句话让我想明白了出现上述问题的原因：对于使用 Object.defineProperty 实现响应式的对象，当我们去给这个对象添加一个新的属性的时候，是不能够触发它的 setter 的。

一开始我的表单存储的对象是空对象，然后我指定给对象里的属性的时候，这些属性是之前没有的，所以就不能触发setter。所以才有了$set这个方法，通过$set可以新增一个响应式的属性，就可以实现双向绑定了。

以前没有注意到这个问题，现在明白了，总算是知其所以然了