vue双向数据绑定原理

Question

vue的双向数据绑定是同步的还是异步的,我的简单理解，vue双向数据绑定的原理是数据改变影响视图，视图改变影响数据，用数据劫持结合发布者订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。那么它的数据绑定也是同步执行的。但是不确定。

Answer 1

拿数据修改视图来说，数据修改后，会调用数据的setter，在setter中调用dep.notify()通知所有监听了该数据的Watcher，遍历所有Watcher，调用update函数，在这个函数里，如果Watcher设置了sync（三大类型Watcher暂无）会直接运行Watcher.run，这就是同步执行，如果没有设置sync，会调用queueWatcher把当前Watcher追加到队列中，延迟调用，这么做是为了提高性能，可以过滤重复的Watcher，可以把多次修改带来的更新进行合并。

所以，双向数据绑定带来的试图更新和数据更新是异步的。比如修改了input的值，在input事件中获取到的值和v-modal绑定的值是不一样的，v-modal值会晚于input事件更新

Answer 2

• 这篇博客也许可以解决你的问题👉 ：Vue双向数据绑定原理