MVVM在面試時問得很多，下面讓Ai教我們怎麼用這個模式：
以下是一個簡單的 MVVM（Model-View-ViewModel）模式在 JavaScript（使用 Vue.js 框架來實現）中的小例子，展示瞭如何實現數據綁定和交互邏輯的分離。
1. 項目搭建
首先，確保你已經安裝了 Vue.js。如果沒有，可以通過以下方式在項目中引入：
在 HTML 文件的頭部添加如下 CDN 鏈接：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>2. 創建 Model
Model 代表應用程序的數據模型，它通常包含數據的結構和獲取數據的方法（在這個簡單例子中，我們先簡單定義一些數據）。
// Model.js
const model = {
data: {
message: 'Hello, MVVM World!',
count: 0
}
};
export default model;這裏定義了一個簡單的對象 model，其中包含了 message 和 count 兩個數據屬性。
3. 創建 ViewModel
ViewModel 是連接 Model 和 View 的橋樑，它負責從 Model 獲取數據並將其提供給 View 進行展示，同時也處理來自 View 的用户交互事件並更新 Model 中的數據。
// ViewModel.js
import model from './Model.js';
const viewModel = {
data: Vue.util.extend({}, model.data),
incrementCount() {
this.data.count++;
}
};
export default viewModel;在 ViewModel.js 中，首先引入了 Model，然後通過 Vue.util.extend 方法創建了一個新的對象，其數據來源於 Model 的數據，這樣可以保證數據的獨立性，避免直接修改 Model 的數據。同時定義了一個方法 incrementCount，用於增加 count 的值。
4. 創建 View
View 負責展示數據和接收用户的交互操作，它通過數據綁定與 ViewModel 進行交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVVM Example</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>Count: {{ count }}</p>
<button v-on:click="incrementCount">Increment Count</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="ViewModel.js"></script>
<script>
const app = new Vue({
el: 'app',
data: viewModel.data,
methods: {
incrementCount: viewModel.incrementCount
}
});
</script>
</body>
</html>在這個 HTML 文件中：
通過雙大括號 {{ }} 語法實現了數據綁定，將 ViewModel 中的 message 和 count 數據展示在頁面上。
使用 v-on:click 指令綁定了按鈕的點擊事件，當用户點擊按鈕時，會調用 ViewModel 中的 incrementCount 方法，從而實現對 count 數據的更新。
在整個例子中：
- Model 負責提供數據的基礎結構和初始值。
- ViewModel 在 Model 和 View 之間起到了承上啓下的作用，它獲取並處理 Model 的數據，同時響應 View 的交互請求並更新 Model 的數據。
- View 則專注於數據的展示和用户交互操作的接收，通過數據綁定和指令與 ViewModel 緊密配合，實現了數據展示和交互邏輯的分離，符合 MVVM 模式的特點。
請注意，這個例子只是一個非常簡單的演示，在實際應用中，Model 可能會涉及到更復雜的數據獲取和處理，比如從 API 獲取數據等，ViewModel 也會有更復雜的邏輯來處理數據轉換和事件響應，View 可能會有更多的頁面元素和交互設計。
總結一下
View + ViewModel 是純js 代碼，減少了View裏的代碼量，純代碼便於測試與重用。
