浅谈对Vue.js的MVVM的理解

Vue.js  最近很火  这两天看了代码以及项目 本地运行了一下  感觉主要还是用来做SPA单页应用  

谈到整体的架构 肯定要跟MVC做对比 

典型的MVC结构  就是  M-----Model   模型

                                     V------View   视图

                                     C------Controller  控制器  

现在的vue 采用的是 MVVM    也就是  M----Model   模型  

                                                            V----View   视图

    VM------ViewModel   

具体两者有什么区别呢？??

下面看一段最简单的vue代码

<div id="app">

    <div v-html="message"></div>

</div>

<script>

    new Vue({

          el:"#app",

    data:{

    message:'<h1>姑娘这鸡汤有毒哇</h1>'

}

     })

</script>

这事一段最基本的vue数据绑定的代码  新建了一个vue对象  绑定了data属性

对于这段的解析就是  当把一个普通的javascript对象传给vue实例来作为他的data选项的时候  vue将便利他的属性  

MVC的看法是 界面山的每一个变化都是一个事件  我们只需要针对每个事件来写一堆代码 来吧用户的输入转化成model里的对象

这对代码就是controller

但是MVVM不是这样想的

我给view里面的各种控件也定义一个对应的数据对象，这样，只要修改这个数据对象，view里面显示的内容就自动跟着刷新，而在view 里做了任何操作，这个数据对象也跟着自动更新，这样多美。所以：

　　ViewModel：就是与界面(view)对应的Model。因为，数据库结构往往是不能直接跟界面控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

　　至于viewmodel的数据随着view自动刷新，并且同步到model里去，这部分代码可以写成公用的框架，不用程序员自己操心了。

　　简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。