Vue 的双向数据绑定的原理

Vue 的双向数据绑定的原理?

Vue是一个前端js框架,按照MVVM的架构实现。MVVMModel-View-ViewModel的简写。

Vue内部通过数据劫持和发布订阅模式实现数据的双向绑定。

实现原理

在创建ViewModel的时候,Vue会将数据配置到实例中。通过Object.defineProperty方法对所有的数据进行数据劫持,给这些数据动态的添加了getter与setter方法。

当获取数据的时候,会触发对应的getter方法,当设置数据的时候,触发对应的setter方法。

在数据变化的时候(setter方法触发完成的时候)发布消息给订阅者(Watcher),触发相应的监听回调,视图更新操作完毕。

基本图解
Vue 的双向数据绑定的原理