vue双向绑定原理
2020-07-01 本文已影响0人
阿凡农
vue采用的是数据劫持结合发布订阅者模式来实现双向绑定,通过Object.defineProperty,通过递归深度遍历数据并劫持了数据的getter跟setter,在数据发生变化时发布消息给订阅者,触发相应的监听回调。
1、第一步,js对象传递给vue作为数据属性时,通过递归的方式给对象的每个值都添加上了getter跟setter,当给对象赋值时,就会触发setter,监听到数据的变化。
2、当数据绑定到dom对象上时,订阅者是作为watcher观察者和complier编译器之间的桥梁,在劫持data的时候,会将watcher添加到数据上边去,这个watcher自身有一个update方法,这个方法会在数据更新时,由于订阅器的dep.notice()方法做了通知而执行试图的更新操作。
vue双向绑定.jpeg