MVVM 模式在 Vue.js 中的应用
Vue.js 是目前前端时下最流行的一款顶级框架，而 MVVM（Model-View-ViewModel）模式则是 Vue.js 的核心思想。在开发中，MVVM 的应用可以大大优化和简化代码结构，让开发者更好地专注于业务实现上。
简介
首先，让我们了解一下 MVVM 模式。MVVM 是 Model-View-ViewModel 的缩写。它是一种架构模式，它将应用程序数据模型分离成一系列可管理的分层。Model 用于表示应用程序中的数据模型，在数据模型变化的时候，触发 ViewModel，ViewModel 则更新 View 显示在 UI 上。ViewModel 获得并管理此数据，同时还将视图信息返回到 View。因此，这个模式允许开发人员将逻辑与视图分离，从而提高应用程序的可维护性和可扩展性。
Vue.js 是一个基于 MVVM 模式的用户界面库。它对于开发人员而言非常友好，可以让开发人员更快地创建交互式的 Web 界面，而无需在实现上投入过多的力气。因为 Vue.js 借用了 React.js 的思想，将视图和数据相分离。这意味着开发人员可以将每个组件拆分成一个函数，并定义视图层的渲染逻辑和数据处理。
Vue.js 的核心部分是采用了 JavaScript 对象的特性，可以将一个对象作为拥有响应式特征的数据模型（Model），从而实现了数据双向绑定。同时，Vue.js 中也有一个 ViewModel 层，它就是一个软件件，专门负责控制 View 和 Model 的同步更新。
应用
下面我们来使用 Vue.js 中的 MVVM 模式来实现一个简单的计算器应用，并说明 MVVM 的应用方式。
- 创建 Model 层
在 Vue.js 中，数据模型（Model）是一个非常重要的部分。首先，我们先创建一个简单的 Model，并且有一个 sum 的属性：
var model = {
sum: 0
};- 创建 ViewModel 层
ViewModel 即数据模型，它是开发人员可以用于管理模型的一种逻辑层。在 Vue.js 中，ViewModel 就是一个 Vue 实例。
-- -------------------- ---- -------
--- --- - --- -----
--- -------
----- -
---- --
------- --
------- -
--
--------- -
------ ---------- -
------ ------------------- - ------------------- -- --
-
--
-------- -
---- ---------- -
-------- - -----------
-
-
--这里我们使用了 Vue 的实例，其中 el 属性定义了所渲染的容器，data 属性定义了两个输入框和一个输出框的值，sum 表示输出框的值，input1 和 input2 分别为两个输入框的值。
在上面的例子中，利用了 Vue 的 computed computed 就是一个方法，它接受一个函数并返回一个被处理后的数据。在这个例子中，total 就是一个 computed 属性，它可以计算出 input1 和 input2 的值并返回。
methods 就是将应用的行为与 UI 结构分离的地方。最后和用户任何操作相联系的方法，要在 methods 字段中定义。
- 创建 View 层
View 即视图，它是应用程序的用户界面部分。在 Vue.js 中，视图可以由 HTML 模板来定义。
<div id="app">
<input type="text" v-model="input1" />
+
<input type="text" v-model="input2" />
<button @click="add">=</button>
<span>{{sum}}</span>
</div>在这个例子中，总的运算逻辑相当简单，只要将两个输入项求和，然后将结果显示在 sum 区域中。
这里 v-model 的作用就是实现双向绑定的，我们在 input 里面输入的数值，不光可以在 input 框里显示，而且同样可以在 ViewModel 中体现。
除了数据的双向绑定，Vue.js 还有其它多种功能，如指令、过滤器等都可以实现开发中的各种需求。
结语
Vue.js 中的 MVVM 模式可以让开发者更加方便的编写 Web 界面，同时也提高了代码的可维护性和可扩展性。通过学习本文的简单计算器应用可以理解 MVVM 模式在 Vue.js 中的应用方式，开发者们在实际开发中可以灵活运用 MVVM 模式，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7fdbba941bf7134e43d0b
