阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录