Vue의 MVVM 패턴을 더 잘 이해하는 방법은 무엇입니까?

최근 몇 년 동안 Vue.js의 버전이 업그레이드되면서 Vue.js는 점점 더 많은 개발자들이 프론트엔드 프레임워크의 첫 번째 선택으로 사용하게 되었습니다. Vue를 이해하지 못하는 프론트엔드라고 할 수 있습니다. 물론 훌륭한 프론트엔드 엔지니어는 아닙니다. 물론 면접에서 승진하지 못하면 Vue는 많은 거절을 당할 것입니다.

그럼 Vue란 무엇인가요?

Vue.js는 매우 사용하기 쉬운 API를 갖춘 경량의 고성능 구성 요소 가능한 MVVM 라이브러리입니다.

많은 초보자는 기본적으로 Vue를 처음 배울 때 매뉴얼을 집어 들고 코드 작성을 시작합니다. , Vue 작성을 시작하기 전에 Vue.js의 MVVM 모드와 jq의 MVP 모드를 이해해야 합니다.

먼저 효과를 살펴보겠습니다.

우리는 할 일 목록의 효과를 달성하려고 합니다. 즉, 입력 상자에 입력 콘텐츠가 제출된 후 입력 콘텐츠가 아래에 표시됩니다.

이 효과를 얻는 것은 어렵지 않습니다. Vue와 jq 모두 가능합니다. 그렇다면 Jq를 사용하여 동일한 프런트 엔드 효과를 얻을 수 있습니다. 그래서 이것은 두 가지의 다른 모드로 시작됩니다.

MVP 모드

MVP 모드는 jq 코드를 작성할 때 사용하는 모드입니다. MVP가 무엇을 의미하는지 살펴보겠습니다. 모델 레이어( 데이터 레이어),
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>";
            $(&#39;ul&#39;).append(html);
        }
    </script>

jq는 입력 상자 데이터를 얻은 후 효과를 얻기 위해 지속적으로 li 태그를 추가하여 페이지의 Dom 구조를 변경하여 효과를 얻는다는 것을 알 수 있습니다. 따라서 프런트 엔드 효과를 얻기 위해 Presenter 계층은 코드의 많은 부분을 차지하는 반면, 모델 계층은 코드의 양이 매우 적습니다.

MVVM 패턴

MVVM은 Model-View-ViewModel의 약자입니다.

모델 레이어는 데이터 모델을 나타내며, 데이터 수정 및 작업의 비즈니스 로직도 모델에서 정의할 수 있습니다. 뷰는 HTML 페이지 코드로 이해할 수 있는 UI 구성 요소를 나타내며, ViewModel은 객체입니다. 뷰와 모델을 동기화하는 것입니다.

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

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

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

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

위 내용은 Vue의 MVVM 패턴을 더 잘 이해하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!