vue 数据双向绑定原理

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的set,get,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用Object.defineProperty 将它们转为 get/set。用户看不到 get/set,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口,整合监听者Observer,指令解析器Compile和订阅者Watcher三者,通过监听者来监听自己的模型数据变化,通过指令解析器来解析编译模板指令(vue中是用来解析 {{}}),最终利用订阅者搭起监听者和指令解析器之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 当问及这个问题的时候,你可能首先就会想到vue的v-model,然后官网是这么介绍的 那么如何自己实现一个v-mo...
    雨蒙_snow阅读 4,044评论 0 0
  • vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.definePrope...
    泪滴在琴上阅读 14,932评论 0 5
  • vue采用订阅者模式,通过Object.defineProperty()来劫持各个属性的setter,getter...
    欧气马路阅读 1,391评论 0 0
  • 构建一个基于数据双向绑定原理的应用 首先,这一切都是基于我们能够实时监听到数据变化,并根据变化做出实时响应 构建一...
    hux1ao阅读 4,064评论 0 1
  • 文/暖暖忆笙 心不累人人自累,一累身,二累神,三累魂灵不安宁 …… 今天写简书的地儿有点特别,你问我在哪儿?嗯...
    一5小确幸阅读 4,359评论 6 12

友情链接更多精彩内容