How to better understand Vue's MVVM pattern?

In recent years, with the version upgrade of Vue.js, Vue.js has also been used as the first choice of front-end framework by more and more developers. It can be said that a front-end who does not understand Vue is not an excellent front-end engineer. Of course, Vue will get a lot of rejections if you don’t know Vue during interviews and promotions.

So what is Vue?

Vue.js is a lightweight, high-performance, componentable MVVM library with a very easy-to-use API

Many beginners are just learning Vue , basically started to pick up the manual and start writing code. In fact, before starting to write Vue, we need to understand the MVVM mode of Vue.js and the MVP mode of jq.

Look at the effect first:

We want to achieve the effect of todolist, that is, after the input content in the input box is submitted, the input content will be displayed below.

It is not difficult to achieve this effect. Both Vue and jq can do it. So the same front-end effect can also be achieved with jq. So why should Vue be preferred? So this starts with the different modes of the two.

MVP mode

MVP mode is the mode we use when writing jq code. Let’s take a look at what MVP stands for:

#model layer (data layer),

presenter layer (control layer/business logic related)

view (view layer)

Presenter is the core layer, When using jq to achieve effects, you will find that there is a lot of code operating on the 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>";
            $(&#39;ul&#39;).append(html);
        }
    </script>

We will find that jq achieves the effect by changing the Dom structure of the page. After obtaining the input box data, it will continuously add li tags to achieve the effect. Therefore, to achieve front-end effects, the Presenter layer accounts for a large proportion of code, while the model layer has very little code.

MVVM pattern

MVVM is the abbreviation of Model-View-ViewModel.

The Model layer represents the data model, and the business logic of data modification and operation can also be defined in the Model; the View represents the UI component, which can be understood as the HTML page code, and the ViewModel is an object that synchronizes the View and the Model.

MVVM is more about processing data rather than manipulating the DOM.

Same effect, let’s see how Vue implements it:

<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:&#39;&#39;,
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                }
            }
        })
    </script>

可见，Vue是通过获取input数据，然后v-for数据循环来实现效果，而不是修改html，这是MVP模式和MVVM模式最大的区别。

那么频繁的操作DOM的缺点是效率低，解析速度慢，内存占用量过高，如果页面比较长，其缺点会更加暴露出来，那么加载时间也就不会很快了。

这也就是为什么同样的效果，我们都在追寻前沿的Vue,慢慢淘汰掉jq的原因。升职加薪，Vue技能赶紧get起来吧。

The above is the detailed content of How to better understand Vue's MVVM pattern?. For more information, please follow other related articles on the PHP Chinese website!