在正式开始学习vue之前，需要先了解什么是MVVM，虽然Vue没有完全遵循 MVVM 模式， 但Vue 的设计无疑受到了它的启发。因此了解MVVM这种架构设计，方便我们后期更好的学Vue，也会对其他MVVM框架的学习有个不错的铺垫。
MVVM拆分之后，由三部分组成，分别是
- M
- 主要用来负责数据的存储
- V
- 主要用来页面的展示
- VM
- 负责项目中逻辑的展示，M 与 V 的连接枢纽
一个应用项目的开发，都会有数据来进行支撑，一般由M进行表示。
将数据（M）封装好之后，需要呈现在浏览器或者其他设备中，并展示到视图（V）中呈现给我们的用户。
那么数据（M）的改变如何能传递给视图页面（V），视图页面（V）的改变又如何进一步让数据察觉并更新呢？这时候，VM的作用就显示了出来，VM就是负责将数据请求过来之后，更新视图页面，同时将视图页面的改变反应到数据中，可以说VM 就是沟通 V 与 M之间的桥梁，起到枢纽连接的作用。
那么MVVM这种设计架构的优势是什么呢？其实MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，每部分完成每部分的职责，这样整个分工就会更加清晰明确，同时也方便项目后期的维护。
一个Vue的Demo，主要演示下MVVM思想
<!DOCTYPE html>
<html>
<head>
<title>MVVM</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="box">
<!-- MVVM 中的 V -->
{{name}}
</div>
<script>
// MVVM 中的VM
var vm = new Vue({
el : '#box',
// MVVM 中的 M
data : {
name : "我是谁"
}
})
</script>
</body>
</html>
网友评论