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里的代码量，纯代码便于测试与重用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。