Vue.js中MVVM的原理和实现-白红宇

MVVM的理解

eafd2dfa952c8eaa6e6684f9e4f82b705c81c0c4

MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。

在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。在Vue.js中MVVM的体现：

4b2a5087ce338ecb20d3394ac88733a90dd99481

MVVM的原理

在不同的框架当中，MVVM实现的原理是不同的：

脏检查机制：

Angular.js就是采取的脏检查机制，当发生了某种事件（例如输入），Angular.js会检查新的数据结构和之前的数据结构是否发生来变动，来决定是否更新视图。

数据劫持

Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

相同点

脏检查机制和数据劫持是有许多相同点的，例如，它们都有三个步骤：

解析模版

解析数据

绑定模版与数据

实现MVVM

    
         Two-way data-binding    
             
              {
    { text }}

原文发布时间为：2018年06月24日

原文作者：

村门口理发店的李师傅

本文来源：

如需转载请联系原作者