Vue.js 实现数据双向绑定的原理 Object.defineProperty()
🌙
手机阅读
本文目录结构
问题
Vue.js 实现数据双向绑定的原理 Object.defineProperty()
答案
vue 实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布 消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript 对象传给 Vue 实例来作 为它的 data 选项时，Vue 将遍历它的属性，⽤ Object.defineProperty() 将它们转 为 getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让 Vue 追踪依 赖，在属性被访问和修改时通知变化。
vue的数据双向绑定 将 MVVM 作为数据绑定的⼊⼝，整合 Observer ， Compile 和 Watcher 三者，通过 Observer 来监听⾃⼰的 model 的数据变化，通过 Compile 来解 析编译模板指令（ vue 中是⽤来解析 {{}} ），最终利⽤ watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（ input ）—> 数据 model 变更双向绑定效果。
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
