近几年伴随着vue.js的版本升级，vue.js也被越来越多的开发人员作为前端框架首选，可以这样说，一个前端不了解vue算不上一个优秀的前端工程师，当然面试升职不会vue更会遭到很多闭门羹。
那么什么是vue呢？
vue.js 是一个轻巧、高性能、可组件化的 mvvm 库，拥有非常容易上手的 api
很多初学者在刚刚学习vue的时候，基本就开始拿起手册开写代码，其实在开始写vue之前，我们有必要了解vue.js的mvvm模式和jq的mvp模式。
先看效果：
我们想实现todolist的效果，也就是输入框输入内容提交后，在下面会显示出输入的内容。
这个效果实现并不难，vue和jq都可以，那么同样的前端效果，jq也可以实现，那为什么要首选vue呢？那么这要从两者不同的模式开始说起。
mvp 模式
mvp模式就是我们在写jq代码的模式，我们来看mvp分别代表什么：
model层（数据层），
presenter层（控制层/业务逻辑相关）
view（视图层）
presenter是最核心的一层，在用jq实现效果的时候，会发现有大量的代码在操作dom。
<div id="root"> <input class="input"/> <button onclick="add(this)">提交</button> <ul></ul> </div> <script> function add(a){ var content=$(".input").val(); var html="<li>"+content+"</li>"; $('ul').append(html); } </script>
我们会发现jq是通过改变页面的dom结构实现效果，获取输入框数据后，会不断的增加li标签，从而实现效果。所以实现前端效果，presenter层占了很大的代码比例，model层相比下代码量很少。
mvvm 模式
mvvm 是 model-view-viewmodel 的缩写。
其中model 层代表数据模型，也可以在 model 中定义数据修改和操作的业务逻辑；view 代表 ui组件，可以理解为html页面代码，viewmodel 是一个同步 view 和 model 的对象。
mvvm 更多的是处理数据，而不是操作dom。
相同的效果，我们看看vue是如何实现的：
<div id="root"> <input v-model="inputvalue" /> <button @click="handlesubmit">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> new vue({ el:"#root", data:{ inputvalue:'', list:[] }, methods:{ handlesubmit:function(){ this.list.push(this.inputvalue) } } }) </script>
可见，vue是通过获取input数据，然后v-for数据循环来实现效果，而不是修改html，这是mvp模式和mvvm模式最大的区别。
那么频繁的操作dom的缺点是效率低，解析速度慢，内存占用量过高，如果页面比较长，其缺点会更加暴露出来，那么加载时间也就不会很快了。
这也就是为什么同样的效果，我们都在追寻前沿的vue,慢慢淘汰掉jq的原因。升职加薪，vue技能赶紧get起来吧。
以上就是如何更好的理解vue的mvvm 模式？的详细内容。