关于javascript:前端面试-vue-部分-2Vue是如何实现双向绑定的

数据的双向绑定

当数据发生变化，ViewModel 可能监听到数据的这种变动，而后告诉到对应的视图做自动更新，而当用户操作视图，ViewModel 也能监听到视图的变动，而后告诉数据做改变，这实际上就实现了数据的双向绑定

1. Vue.js 是采纳 Object.defineProperty 的 getter 和 setter，并联合 观察者模式 来实现数据绑定的。
2. 当把一个一般 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，并用 Object.defineProperty（）办法把它们转化为 getter/setter 办法。当 data 中的属性被拜访时，则会调用 getter 办法；当 data 中的属性被扭转时，则会调用 setter 办法
3. 名词解释

• 监听器 Observer：利用 Object.defineProperty() 对属性都加上 setter 和 getter 实现数据劫持
• 解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，而后初始化渲染页面视图
• 订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，次要的工作是订阅 Observer 中的属性值变动的音讯，当收到属性值变动的音讯时，触发解析器 Compile 中对应的更新函数。
• 订阅器 Dep：用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行对立治理。

1. 详解（参考链接）

   1. 首先咱们须要设置一个 监听器 Observer，对数据对象进行遍历，包含子属性对象的属性，利用 Object.defineProperty() * 对属性都加上 setter 和 getter*。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变动。如果属性发上变动了，就须要通知订阅者 Watcher 看是否须要更新。
   2. 因为订阅者是有很多个，所以咱们须要有一个 音讯订阅器 Dep 来专门收集这些订阅者，而后在监听器 Observer 和订阅者 Watcher 之间进行对立治理的。
   3. 接着，咱们还须要有一个 指令解析器 Compile，解析 Vue 模板指令，将模板中的变量都替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，订阅者 Watcher 收到告诉，调用更新函数进行数据更新
   4. 此时当 订阅者 Watcher 接管到相应属性的变动，就会执行对应的更新函数，从而更新视图。

欢送留言~~~