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的實例中的那些屬性 $data $methods $computed 等等

在一個.vue文件中，我們會看到3部分<template /> <script /> <style />

<template /> 負責視圖模型和綁定器

<style /> 負責視圖的CSS

<script /> 中定義的Vue實例負責模型的數據管理和綁定器的邏輯

如何用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的關系：

arr和<li>標簽綁定，有多少個arr元素就有多少個<li>

後面arr添加了一個元素6，這時候arr的長度是6，那應該有6個<li>，這就是數據和視圖的綁定，由數據的結構我們就可以推出視圖的樣子。

所以我們要多從操作數據的角度思考問題，當然前提是你已經確定了Model和ViewModel的綁定關系是怎樣的。這個時候我們只需操作Model就可以了。

上面的例子采用的數據結構是數組，當然還有很多數據結構。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>

Vue和MVVM對應關系