如何理解Vue的MVVM模式

这篇文章将为大家详细讲解有关如何理解Vue的MVVM模式，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

近几年伴随着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模式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。