欢迎光临
我的个人博客网站

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

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

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

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

  1. 详解( 参考链接

    1. 首先我们需要设置一个 监听器Observer , 对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() **** 对属性都加上 setter 和 getter 。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化 。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。
    2. 因为订阅者是有很多个,所以我们需要有一个 消息订阅器Dep 来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。
    3. 接着,我们还需要有一个 指令解析器Compile , 解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动, 订阅者Watcher 收到通知,调用更新函数进行数据更新
    4. 此时当 订阅者Watcher 接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。
      欢迎留言~~~
赞(0) 打赏
未经允许不得转载:张拓的天空 » 前端面试 vue 部分 (2)——Vue是如何实现双向绑定的
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏