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文件中，咱們會看到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>