概要
这篇文章首先梳理一下传统MV的设计模式，然后以一个例子来说明vue中的MVVM的思想。主要讲什么是MV以及vue中的MVVM是什么样子的，暂时不讲实现原理。
传统的意大利面条
<button style="....." onClick="if(....){....}else{.....}">...</button>
So, 为了避免意大利面条，一些框架创建了关注点分离
概念
M: 模型 => 数据，业务逻辑，验证逻辑，模型常常包含业务逻辑。
V: 视图 => 交互界面，是模型数据的可视化呈现，视图可能包含展示逻辑。
*: 这个部分将帮助管理模型与视图间的关系，以及模型，视图，用户的关系。
传统的设计模式
MVC
C: 控制器 => 接收来自UI控件的信号，包含了处理用户输入的逻辑，基于接收到的输入，发送命令给M，来更新V。在MVC中，V能够捕获M的变化，并且在观察到模型变化的时候，更新视图。
MVP
P: 视图将职责委托给P,视图仅仅用于相应用户的交互。P直接访问模型来获取任何更新，将数据更新回传给视图。在这种模式下，P在模型和视图之间扮演了中间人的角色。
V和M不发生联系，都是通过P来传递。V不部署任何业务逻辑。而P非常厚，所有的业务逻辑都在这里
MVVM
VM: VM仍然是视图与模型的中间人。包含了Property及其展示逻辑。在模型中，每一个需要在视图里得以反应的数据点，都映射到了视图模型的对应Property上，VM能够掌握视图与模型的变化，并保持两者同步。
MVVM和MVP唯一的不同就是采用了数据双向绑定。V的变动直接反映在了VM上，M的变化也直接反映在了VM上。
其实不用太在意前端框架是用的是哪种模式，没有哪个框架是绝对去匹配一种模式，只有使用更适合的模式来实现前端框架。So，让我们MVW(W: whatever)
vue的设计模式
现在用一个例子来说明mvvm。我们要实现一个下面功能的mockup：
功能：
- 这个demo用来输入一些用户信息
- 界面的左边输入用户信息
- 界面的右边用来展示信息条目
- 点击左边的add按钮将左边的用户信息添加到右边的条目
- 右边每个条目都有一个Delete按钮，点击按钮删除条目
下面就进行分析：
模型(M)
每个模型都是现实世界中的一个事物，这里我们的模型包含三个字段：
name, number,email。我们的模型应该是这样的：
[
{
name: 'Haha',
number: '182****1234',
email: 'haha***@qq.com'
},
{
name: 'Hehe',
number: '182****1234',
email: 'hehe***@qq.com'
}
]
可以看出，模型是一个数组组成的列表，模型的数据来自用户自己填写的表单，可视化效果就是mockup右侧的样子。有一些框架可以隐式的创建模型，就是不用显示的声明模型，而vue是显示的声明模型。
new Vue({
data(){
return {
userinfo: {
name: '',
number: '',
email: ''
},
users: []
}
}
})
使用框架的好处之一就是，除了应用逻辑外，数据与UI绑定结合的逻辑将由框架处理。
视图(V)
1.绑定
顾名思义就是将UI元素与相关代码联系起来。绑定的语法有两种，一种是表达式，一种是命令。vue中有双向绑定，单向绑定，单次绑定。
双向绑定
在创建之后，改变任何一端，另一端会跟着改变(模型和视图同步)。主要体现在表单元素上。下面我们就将input控件的值绑定到userinfo的视图模型上
<input v-model="userinfo.name" placeholder="name" />
单向绑定
顾名思义，一端的改变会影响另一端，反之则不影响。这种类型的绑定用于不需要用户输入的元素。
<ul>
<li v-for="item in users">{{item.name}}<li>
</ul>
单次绑定
只绑定一次，后面数据在改变，视图也不会更新。在vue中使用v-once渲染过一次之后，元素/组件及其所有的子节点将被视为静态内容并跳过。举例：
<!-- 当title再次改变时插值处的内容将不会改变 -->
<h4 v-once>{{title}}</h4>
2.模板
vue中模板就是视图。模板看似是一些html代码。实则vue将它作为字符串，进行了处理，让看似html代码中的插值和指令达到我们想要的效果。
模板渲染
这里简单的说一下vue的模板渲染，我们将模板字符串给 template属性，vue拿到这一段字符串会做一大堆工作，这里大概说一下，后面分析源码时会详细分析。template先转为AST，AST再转成 render函数，生成真是的dom。好讲完了。
关注点分离
基于底层的设计模式，模型专注数据，视图专注数据展示，vm则是将模型和数据解耦，并维持两者间的互相通信。记住一个原则，越是聚焦于单一目的，编码，测试，更改就会越容易。
好了我感觉我已经把vue的mvvm讲述清楚了。先知道什么是vue的mvvm，然后再去搞懂vue是怎么实现的。哈哈哈
网友评论