vue 双向数据绑定

Vue实现数据双向绑定的原理:Object.defineProperty()
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1、了解vue的双向数据绑定原理以及核心代码模...
    C楚辉H阅读 12,674评论 0 5
  • 剖析Vue原理、实现双向绑定MVVM 几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定...
    不得不爱XIN阅读 3,980评论 0 1
  • # 前言   MVVM 是与 MVC 进化出来的,区别在与将view层的数据变动直接响应到viewModel层上而...
    果汁凉茶丶阅读 4,683评论 0 9
  • # 前言 MVVM 是与 MVC 进化出来的,区别在与将view层的数据变动直接响应到viewModel层上而不是...
    Sun____阅读 4,834评论 0 1
  • 要点:写作动机:vue因为文档友好,上手容易,已经得到大家使用认可,我很好奇它的实现原理关于vue数据绑定原理的文...
    好奇而已阅读 4,447评论 0 2