前言MVVM是一种软件架构模式，将View的状态和行为抽象在其中，让我们将视图UI和业务逻辑分离，而vue.js是一个轻量级的，high-level基于性能和组件的MVVM库有一个非常易于使用的API。这是MVVM的一个很好的实践。这里简单介绍一下Vue在双向数据绑定中对MVVM的实际应用。MVVM架构的优点低耦合。视图（View）可以独立于模型而改变和修改。ViewModel可以绑定到不同的“视图”。当View改变时，Model可以保持不变，当Model改变时，View也可以保持不变。可重用性。您可以将一些视图逻辑放在一个ViewModel中，让许多视图重用这个视图逻辑。自主开发。开发人员可以专注于业务逻辑和数据开发（ViewModel），设计师可以专注于页面设计。易于测试。接口一直很难测试。开发中的大部分bug来自于逻辑处理。由于ViewModel分离了很多逻辑，您可以为ViewModel构建单元测试。Vue专注于MVVM来实现数据的双向绑定。双向数据绑定连接了View层和Model层，View和Model之间的同步是完全自动的，不需要人为干预，所以开发者只需要关注业务逻辑，不需要手动操作DOM，无需关注数据状态的同步。复杂数据状态的维护完全由MVVM管理。极大方便了数据状态的维护和管理。Vue对MVVM架构的实践。上面我们了解了MVVM的优点，下面我们来分析一下Vue.js对MVVM的实践。让我们实现双向数据绑定的原理。见下图。Vue.js使用Object.defineProperty中的getter和setter对对象中的属性进行操作，结合观察者模式实现数据绑定。简单分析一下这个过程：当一个JS对象作为数据传递给Vue实例时，Vue会遍历它的属性，使用Object.defineProperty将它们转化为getters/setters。Vue内部会监控它们，当属性被访问或修改时及时通知在分析Vue的双向数据绑定之前，我们先了解一下上图中各个位置的作用。Observer：数据监听器，监听Vue的数据对象中的所有属性。对于watcher（订阅者）Compile：指令编译器，扫描解析每一个DOM元素节点指令，根据指令模板替换数据，并绑定相应的更新函数Dep：消息订阅者，里面有一个维护的数组来收集订阅者（Watcher),如果数据发生变化，触发notify函数，然后调用wacher订阅者Watcher的update方法：订阅者，连接观察者并编译，获取属性变化的通知，及时更新数据到视图中Vue中双向数据绑定的步骤一步一步。这个过程大致可以分为两个阶段。一是初始化阶段，二是数据更新阶段。初始化阶段执行newVue()，Vue进入初始化阶段。一个操作，一个是数据监控，一个是页面渲染。一方面，Vue会遍历data选项中的属性，使用Object.defineProperty将其转化为getters/setters，实现数据变化监听功能。另一方面，命令编译器Compile扫描并解析元素节点的命令，初始化视图，订阅Watcher更新视图。此时wacher会将自己添加到消息订阅者（Dep）中，初始化完成。在数据更新阶段，当data数据中的某个属性发生变化时，会触发Observer中的setter方法，setter会立即调用Dep.notify()，然后Dep会开始遍历所有的订阅者，发送通知给subscriberWatcher，并调用订阅者的更新方法。最后，订阅者Watcher收到Dep的数据更新通知后，也会相应更新视图。至此，完成数据的双向绑定作者：YU_yu链接：https://juejin.cn/post/6950939562872930341来源：掘金版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。
