vue 的双向绑定原理

vue的双向绑定原理是通过数据劫持来做数据的双向绑定的,其中最核心的方法便是通过Object.defineProperty()方法来实现对属性的劫持,达到监听数据变动的目的,这个方法是最重要的,最基础的内容之一。

下面我们即将说的就是defineProperty这个方法。点击我查看详情

要实现mvvm的双向绑定,必须要实现以下几点:

第一点:实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如果有变动可拿到最新值并且通知订阅者。
第二点:实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
第三点:实现一个Watcher,以为连接Observer和Compile的桥梁,能后订阅并且收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。
第四点:mvvm入口函数,整合以上三者。


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

推荐阅读更多精彩内容

  • 我的github: vue双向绑定原理 MVC模式 以往的MVC模式是单向绑定,即Model绑定到View,当我们...
    KlausXu阅读 45,269评论 7 90
  • 今天是周五,今天一行代码也没有写,心血来潮想看看vue.js的实现原理和双向绑定MVVM。来吧BB那么多费话真没用...
    Ziksang阅读 4,072评论 3 20
  • 要点:写作动机:vue因为文档友好,上手容易,已经得到大家使用认可,我很好奇它的实现原理关于vue数据绑定原理的文...
    好奇而已阅读 939评论 0 2
  • 几种双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基...
    Picidae阅读 5,654评论 2 4
  • 亲爱的雾友们: 再过18天,2016即逝,2017将来。 申猴驾云去,酉鸡报晓来。 时光荏苒,岁月如梭。 在过去的...
    冰语夏虫阅读 209评论 0 0