【Vue.js】MVVM 的概念

Neptune Li

Published in

Li-NInja

Oct 25, 2020

🚩 前言

在介紹 MVVM 的概念之前要先介紹 MVC 架構，
MVC 是一個軟體架構模式，
這套軟體架構模式可以被使用在前端開發上，也可以被使用在後端開發上。
本文介紹的 MVC 架構是以開發前端爲主。

MVVM 是一個軟體架構模式，
他能夠有助於將開發的商業邏輯與畫面呈現做切割，
可以更好地針對問題來解決。

🚩 MVC

MVC 架構（Modal — View — Controller），這三個英文分別代表的是：

Modal — 模型
View — 視圖
Controller — 控制器

當 MVC 架構套用在前端開發時，他們分別代表的意思會是：

Modal
與資料介接的地方，負責去向 DB 撈取資料
View
一般使用者看到的網頁畫面
Controller
負責 View 與 Modal 之間的溝通

例如：
使用者在畫面上（View）看到了 皮卡丘 與一個按鈕，
當使用者按下按鈕之後，
會觸發 JavaScript 的 AddEventListener（Controller），
取得修改的值 噴火龍（Modal），
使用操作 DOM 元素的方式更改 pokemon（Controller），
最後的結果就是 皮卡丘 換成了 噴火龍（View）。

<body>
  <div id="pokemon">皮卡丘</div>
  <button id="go">就決定是你了</button>  <script>
    const btn = document.getElementById('go');
    const pokemon = document.getElementById('pokemon');
    const newPokemon = '噴火龍';
    btn.addEventListener('click', () => {
      pokemon.textContent = newPokemon;
    });
  </script>
</body>

🚩 MVVM

MVVM（Model — ViewModel — View），這三個英文分別代表的是：

Modal — 資料狀態
ViewModal — 資料連結器
View — 視圖

這三個分別的用途是：

Model
儲存資料（變數）的值
ViewModel
負責 Model 與 View 之間的橋梁
View
一般使用者看到的網頁畫面

🚩 Vue.js

Vue 是以資料狀態操作畫面，
他扮演 MVVM 架構當中的 ViewModel，
可以有效的將負責視圖的 HTML 與負責資料狀態的 JavaScript 做一個切割。
能讓開發者專注於解決版面顯示的問題，
或是資料邏輯的 JavaScript 的問題。

例如：
使用者在畫面上（View）看到了 皮卡丘 與一個按鈕，
當使用者按下按鈕之後，
會觸發 Vue 的 changeName 方法（ViewModal），
將 pokemon 的值修改為 噴火龍（Modal），
因爲 ViewModal 與 View 是 Binding 的關係，
讓 View 的值顯示為 噴火龍。

<body>
  <div id="app">
    <div>{{ pokemon }}</div>
    <button @click="changeName">就決定是你了</button>
  </div><script>
    var app = new Vue({
      data: {
	pokemon: '皮卡丘',
      },
      methods: {
	changeName() {
	  this.pokemon = '噴火龍';
	},
      },
    });
  </script>
</body>

【Vue.js】MVVM 的概念

🚩 前言

🚩 MVC

🚩 MVVM

🚩 Vue.js

Written by Neptune Li