Vue和MVVM的对应关系

Vue是受MVVM启发的，那么有哪些相同之处呢？以及对应关系？

MVVM(Model-view-viewmodel)

MVVM还有一种模式 model-view-binder ，主要用来简化用户界面的 事件驱动程序设计

MVVM可以分成四部分

Model:模型
View:视图
ViewModel:视图模型
Binder:绑定器

主要形式还是 Model-ViewModel-View

模型：是指代表真实状态内容的领域模型(面向对象)，或指代表内容的数据访问层(以数据为中心)

视图：是用户在屏幕上看到的结构、布局和外观(UI)

视图模型：暴露公共属性和命令的视图抽象。让视图和数据二者进行通信，靠的 绑定器

绑定器：声明性数据和命令绑定

Vue和这四部分的关系

对应关系：

• 视图：对应真实的html和css
• 视图模型：对应Vue的模板语法
• 绑定器：对应v-bind v-model @click :prop等绑定数据语法

• 模型：Vue的实例中的那些属性

  datamethods $computed 等等

如何用Vue解释 Model-ViewModel-View 呢？

ViewModel-View阶段

视图模型转化为视图，也即Vue中的模板语法转化为实际的HTML和CSS，这个部分主要由Vue自动实现，我们开发者主要处理的是 Model-ViewModel 阶段。

Model-ViewModel阶段

这个阶段就是我们实例化Vue对象，添加data,methods等操作，以及将数据绑定到模板上。

<template>
  <div class='test' @click='add'>{{count}}</div>
</template>复制代码

// <script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    add (e) {
      this.count += 1
    }
  }
}复制代码

Model:定义data函数管理数据count,以及定义add函数控制count数据的变更

ViewModel:是抽象语法，主要是Vue的模板语法，绑定数据，之后Vue会将其转化为真实的HTML

由于，ViewModel和Model主要是 绑定关系 ，也即是数据和视图是绑定的，你什么样的数据就决定了什么样的视图，所以我们一般也把Vue称为数据驱动框架。

所以很多时候，只要知道数据和ViewModel的关系，也就知道UI的样子了，这个时候，我们只需操作数据的结构，也就操作了视图。

<template>
  <ul class='list'>
    <li class='item' v-for='(v, index) in arr' :key='index'>{{v}}</li>
  </ul>
</template/>复制代码

export default {
  data () {
    return {
      arr: [1, 2, 3, 4, 5]
    }
  },
  created () {
    // 改变数据arr的数据结构，添加新的数值
    this.arr.push(6)
  }
}复制代码

Model和ViewModel的关系：

上面的例子采用的数据结构是数组，当然还有很多数据结构。Model和ViewModel绑定后，基本上Model的数据结构就决定了。那么这时，我们只需根据这个Model的数据结构增删修改。

还有一点就是vue中有多种绑定方式，v-if v-for 等等，一个ViewModel只有一个Model的数据结构，但是相同的View可以有多种ViewModel

比如这个View <div>hello</div> ，有多种ViewModel都可以生成这个，有多种ViewModel也即有多种Model(数据结构)

<template>
  <div>{{data}}</div>
  <div>{{obj.data}}</div>
  <div>{{arr[0]}}</div>
</template>复制代码

export default {
  data () {
    return {
      data: 'hello',
      obj: {
        data: 'hello'
      },
      arr: ['hello']
    }
  }
}复制代码

上面有3种ViewModel和3种Model 但生成的View都是一样的 <div>hello</div>