前端面试 vue 部分 (2)——Vue是如何实现双向绑定的

• Z时代
• 2024-01-10
• 分类：综合

数据的双向绑定

当数据发生变化，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 进行统一管理。

4. 详解（ 参考链接）

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

      欢迎留言~

以上是 前端面试 vue 部分 (2)——Vue是如何实现双向绑定的 的全部内容， 来源链接： utcz.com/z/375390.html