Vue的MVVM模型和双向数据绑定原理

1、MVVM模型的概念

​ MVVM — 是 Model、View、ViewModel 三者的缩写，是一种前端开发的模式，其核心在于数据和视图的双向数据绑定，不再需要程序猿手动操作DOM，也就是所谓的去 DOM 化，让前端开发能高效、便捷。

​ Model 是数据层，其中定义了页面的数据信息以及对应的操作逻辑。

​ View 是视图层，负责展示各种数据，也就是用户所看到的页面。

​ ViewModel 是一个抽象层，是数据层和视图层沟通的桥梁，通过双向数据绑定，一方面将 Model 的数据变化，实时更新到 View 中。另一方面将 View 中的触发的各类 DOM 事件，反馈到 Model 中，执行相应操作。

2、Vue 双向数据绑定的原理

名词概念：

​ 数据劫持： 在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改，然后再返回结果。

​ 发布者-订阅者模式： 定义了对象间的一对多的依赖关系，让多个订阅者对象同时监听某一个发布者对象，并且当该对象发生变化时，所有依赖于它的对象都会跟着发生变化。

​ Observer： 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新的值并通知订阅者，内部采用的Obiect.defineProperty的getter和setter来实现。

​ Complie： 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，初始化视图，以及将指令绑定相应的回调函数。

​ Watcher： 订阅者，作为连接Observer和Complie的桥梁,能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。

​ Dep： 消息订阅器，内部维护了一个数组，用来收集所有订阅者（watcher）,数据变动触发notify()方法，再调用订阅者的update方法。

具体原理：

​ Vue 的双向数据绑定是通过数据劫持并结合发布者-订阅者模式实现的，利用了 Object.defineProperty() 重新定义了对象获取属性的getter方法和设置属性的setter方法。

​ 展开来说就是，当Vue实例进入了初始化阶段，一方面Vue会遍历和递归data中的定义好的属性，并通过Object.defineProperty给他们设置getter/setter，劫持数据，实现Observer的数据变化监听功能；Vue的指令编译器Compile对元素节点的指令进行扫描和解析，初始化视图,并订阅Wacther来更新视图，此时wather会将自己添加到消息订阅器（Dep）,初始化完毕。

​ 当数据发生变化时，Observer中的setter方法被触发，setter会立即调用Dep，触发notify()方法,开始遍历通知所有的订阅者，并调用订阅者的update方法，订阅者收到通知后对视图进行相应更新

详细内容请访问：
作者：小浪哦
链接：https://juejin.cn/post/6844903630546403336

​