双向绑定是数据变化更新到视图,视图上数据的变化更新到数据层。
Vue的双向绑定实现主要依赖于三个方面:
- 数据监听(observer)
- 指令解析(compile)
- 观察订阅(watcher)
数据监听通过Object.defineProperty()
方法劫持数据data中的变化,每当有数据变化,它就会通知watcher
指令解析将v-on
、v-bind
指令进行解析整理,绑定相应的数据。
观察者是以上两者的桥梁,因为有了数据订阅,每次数据变化,watcher
将新值通知模板上的数据改变。模板上的数据变化触发指令,将事件通知给watcher
,watcher
进行数据层新数据的设定
参考资料:剖析Vue原理&实现双向绑定MVVM