MV*和Vue的MVVM

概要

这篇文章首先梳理一下传统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是怎么实现的。哈哈哈