60.vue2.0中双向数据绑定的原理

55 阅读1分钟

双向数据绑定是通过数据劫持发布订阅模式实现的

vue采用的是MVVM架构,主要包含两个方面:1.数据变化更新视图 2.视图变化更新数据

实现上,主要分为四个模块

  • 监听器 observer 劫持监听所有属性,如果发生变化,就通知订阅者是否更新

  • 订阅者 watcher 接受属性变化通知,并执行相关函数,从而更新视图

  • 消息订阅器 Dep 收集订阅者,然后在监听器和订阅者进行管理

  • 解析器 compile 扫描和解析每个节点的相关指令,将模板中的变量替换成数据,然后渲染视图。