总结：Vue2中双向绑定不生效的排查方法及原理

之前陆陆续续的学习了Vue2的双向绑定，深度监视，但是真正使用时，需要将它们融会贯通，还是需要刻意的练习和记忆的。我常常遇到的问题是，当页面上某element UI控件与data中的某属性进行了双向绑定，但是，要么是data中的属性数据发生了更新之后页面未实时更新，要么是页面上无法实时响应用户输入（或选择）动作。

归根结底，都是因为未满足Vue2的响应式条件，导致双向绑定不生效，但是，产生的原因却各不相同。今天尝试总结一下，以后再遇到类似的问题，可以直接复用排查思路。

Vue2的响应式原理

由于 Vue 会在初始化实例时，把data中的各种属性通过Object.defineProperty转换成setter/getter，以使得vue能够追踪这些属性的变更，从而适时通知页面重新渲染或者修改Model中的值，从而实现数据的双向传递。

限制

但是，由于javaScript的限制，Vue2的响应式并非无所不能：

1、在初始化时执行getter/setter转化，意味着如果在初始化之后在data中添加或删除的属性，无法被监测到（即无法成为响应式的变化）

2、默认情况下，它仅能监视普通属性的变化（因为它监测地址的变化࿰