Vue双向数据绑定

所谓双向数据绑定, 无非就是数据层和视图层中的数据同步, 在写入数据时视图层实时的跟着更新。

实现mvvm的双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。就必须要实现以下几点:

1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图

4、mvvm入口函数,整合以上三者

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

推荐阅读更多精彩内容

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