总结:Vue2中双向绑定不生效的排查方法及原理
之前陆陆续续的学习了Vue2的双向绑定,深度监视,但是真正使用时,需要将它们融会贯通,还是需要刻意的练习和记忆的。我常常遇到的问题是,当页面上某element UI控件与data中的某属性进行了双向绑定,但是,要么是data中的属性数据发生了更新之后页面未实时更新,要么是页面上无法实时响应用户输入(或选择)动作。
归根结底,都是因为未满足Vue2的响应式条件,导致双向绑定不生效,但是,产生的原因却各不相同。今天尝试总结一下,以后再遇到类似的问题,可以直接复用排查思路。
Vue2的响应式原理
由于 Vue 会在初始化实例时,把data中的各种属性通过Object.defineProperty转换成setter/getter,以使得vue能够追踪这些属性的变更,从而适时通知页面重新渲染或者修改Model中的值,从而实现数据的双向传递。
限制
但是,由于javaScript的限制,Vue2的响应式并非无所不能:
1、在初始化时执行getter/setter转化,意味着如果在初始化之后在data中添加或删除的属性,无法被监测到(即无法成为响应式的变化)
2、默认情况下,它仅能监视普通属性的变化(因为它监测地址的变化