切图崽的自我修养－[MVVM] 进一步认知viewModel

前言

上一篇讲到了MVC/MVP/MVVM, 但其实一直还对MVVM中的VM部分存在一些理解问题, 敲了一遍vue的demo之后，加深了对VM的理解

例子

现在需求如下，有一个按钮<button id="#btn">ajax btn<button>，点击之后，发送ajax请求，并将接收到的结果更新到<p id="msg"></p>中

传统写法

<div id='container'>
        <button id='btn'>ajax btn</button>
        <p id='msg'></p>
    </div>
    
    <script>      
    $('#btn').on('click',function(){
        var response = $.ajax(…).data;
        $('#msg').text(response);
    })
    </script>

1. 在#btn上绑定点击事件

2. 一旦捕获到点击事件，向后台发送一条ajax请求

3. 得到后台返回的数据response

4. 操作#msg,将最新的response填进去

VM写法

<div id='container'>
        <button id='btn' v-on='clickFun()'>ajax btn</button>
        <p id='msg'>{{ response }}</p>
    </div>
    
    <script>
        new Vue({
          el: '#container',
          data: {
            response:'',
          },
          methods:{
            clickFun:function(){
             var response = $.ajax(…).data;
             this.response = response;
            }
          }
        })
    </script>

1. 声明一个vm(viewModel)作用域

2. (vue将dom的视图和你定义的data进行一个数据绑定)

3. 将#btn通过指令绑定一个点击事件

4. 一旦捕获到点击事件，向后台发送ajax请求

5. 得到后台返回的数据response

6. 更新data

7. (vue监听到data的变化，于是更新对应的视图)

对比传统的操作dom的方式和vm的方式，很容易看出来，vm只做了一件事情就是
将视图和数据绑定起来,免去了获取视图数据和根据新数据更新视图的繁琐操作，这样能使你更专注你的业务逻辑,而不用为了如何进行dom操作伤脑筋

• 以前我们要获取视图的源数据，采用的是$dom.val()/$dom.text()等操纵dom节点的方式. 但是有了vm, 我们获取视图数据的时候不用再去操纵dom节点了,而是通过v-model等指令直接获取视图上的数据 (感谢Vue的封装)

• 以前我们根据新数据更新视图的时候，采用的是$dom.text()/$dom.html()等操纵dom节点的方式，但是有了vm, 我们根据新数据更新视图的时候不用再去操纵dom节点了,因为我们只要更改data的值，视图就会自动被更新 (感谢Vue的封装)

结语

以上是切图崽对viewModel的一些粗浅的认知，如果对viewModel特别是状态管理/数据绑定相关技术感兴趣的同学，请移步React/Angular2/Vue