美文网首页
Vue.js数据双向绑定原理(MVVM模式)

Vue.js数据双向绑定原理(MVVM模式)

作者: 小姨妈1596 | 来源:发表于2020-03-20 17:31 被阅读0次

    首先需要一个监听器Observer监听数据(model)的变化,具体实现是利用Observer中Object.definePrototype()函数实现监听数据。

    当数据发生变化就通知订阅者Watcher通知并执行绑定的更新函数,从而更新视图。

    最后需要一个Compile解析器,解析V-model、V-on等节点,绑定对应的更新函数并初始化这类节点的模板数据。

    MVVM模式概念:MVVM模式就是Model–View–ViewModel模式。它实现了View的变动,自动反映在 ViewModel。相反的,ViewModel的变动也会自动反应在View。ViewModel是作为Model和View桥梁的存在。

    示意图

    可参考Vue.js官方文档中的这一章节:vue.js官网网站

    相关文章

      网友评论

          本文标题:Vue.js数据双向绑定原理(MVVM模式)

          本文链接:https://www.haomeiwen.com/subject/jutsyhtx.html