vue 怎么实现数据的双向绑定:Object.definePro
2019-04-22 本文已影响0人
曾经也是个少年
vue 实现数据双向绑定主要是采用数据劫持结合发布者订阅模式的方式,通过Object.defineProperty()来劫持各个属性的setter,和getter,在数据变动时发布消息给订阅者,出发相应的监听回调,当把一个普通的JavaScript对象传给Vue实例来作为它的data选项时,vue将遍历它的属性,用Object.defineProperty()将它们转为setter/getter,用户看不到,但是在内部它们让Vue追踪依赖,在属性北方为和修改的时候通知变化
vue的数据双向绑定将MVVM作为数据绑定的入口,整合OBserver,compile,watcher三者,通过Observer来监听自己的model数据变化,通过compile来解析编译模板的指令,最终用watcher搭起的observerhe compile之间的同学桥梁,达到数据变化->视图更新,视图交互变化->数据model变更双向绑定效果