vue双向数据绑定原理

Vue双向数据绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。直接参考链接1，原作者写的太tm好了。

双向数据绑定如何实现

1. 传统实现方式：
   • view => model：通过表单，提交表单时可以获取到view绑定的model或者通过某些特殊事件监听，如：oninput等
   • model => view：每次更新model时，获取相应DOM，手动更新view
2. 借助第三方类库(实现MVVM设计模式)：
   • knockout.js、vue.js、angular.js、backbone.js等
3. 双向数据绑定底层实现原理||MVVM设计模式实现原理：
   • 脏值检查(angular)：指定的事件触发时进入脏值检测，通过脏值检测的方式比对数据是否有变更，来决定是否更新视图
   • 数据劫持(vue)：通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。参考链接

参考链接

1. https://www.cnblogs.com/canfoo/p/6891868.html
2. https://github.com/canfoo/self-vue
3. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty