怎样理解MVVM模式

一、什么是MVVM

刚接触前端框架的人对MVVM模式可能难以理解，MVVM模式的全称是Model-View-ViewModel模式，当View的视图层发生变化时，会自动更新到ViewModel视图模型，反之亦然，也就是常说的数据双向绑定；通过图示了解一下三者之间的关系：

ViewModel相当于MVC模式的controller，当视图层发生改变时，会通过ViewModel将数据更新到Model，当Model发生变化时也会通过中间的控制层更新到视图层。

二、Vue基本代码和MVVM模式之间的对应关系

先来看一段基本的Vue代码：

        <div id="app">
        <p>{{msg}}</p>
        </div>
        <script>
    	var vm=new vue({//创建一个Vue实例
    el:"#app",//定位区域
    data:{
	 msg:'hello world'//将会渲染到html代码msg的变量里
}
    })
    	</script>

初步接触vue.js的人应该都有写过类似的代码（每学一种语言或者框架都会不自觉的写Hello World），现在来定位一下MVVM分别对应上述代码的哪些部分：
显而易见，

<div id="app">
 <p>{{msg}}</p>
</div>

这段对应的就是视图层View，也就是编译后会直接显示在页面上的。

而new出来的Vue实例也就是后面的Script标签里面的代码所代表的就是ViewModel视图模型，它通过控制view层的元素代码，将数据渲染到指定的元素区域内，我们也就不需要再去操作DOM元素了。

最后就是Model层了，其所代表的是模型层，也就是数据所在的区域，

  <div id="app">
   <p>{{msg}}</p>
     </div>

这段代码的{{msg}}所显示的就是数据，而这个数据是在vue实例中的data选项来的，因此可以确定

  data:{
   		 msg:'hello world'//将会渲染到html代码msg的变量里
    }

代表的就是MVVM中的Model了

三、总结

当然，在学习MVVM模式的过程中其实并不需要过多的去注意MVVM三者的界限在哪，而且这在使用过程中似乎也并没有那么重要，个人认为在学习某一种前端框架的时候，最重要的还是要去理解这一模式的基本思想。

ps：初来乍到，请多指教，有不妥的地方，敬请指出并纠正

Thanks for Browsing