VueJS、Angular、React原理_vue angular react 理念是一样的 mvvm

作者：人工智能uu | 2024-07-08 00:05:43

踩

vue angular react 理念是一样的 mvvm

Vue.JS、AngularJS、ReactJS，它们都是MVVM数据驱动框架系列的一种。

MVVM由微软提出，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

它采用双向绑定（data-binding）：View的变动，自动反映在ViewModel，反之亦然。model数据的变动，也自动展示给页面显示。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model.

以前只采用jQuery写出来的代码是这样的：


        <div id="name" style="color:#fff">汪汪</div>
        <div id="age">1</div>


        $('#name').text('喵喵').css('color', '#000000');
        $('#age').text('4').css('color', '#fff');

采用MVVM之后，可以先不关心DOM结构，而关心数据的展现：


//原始数据
        var pet = {
            name: '汪汪',
            age: 1,
            tag: 'dog'
        };

我们把pet变量看做Model数据，把HTML某些DOM节点看作View，并YY它们已经通过某种手段被关联起来了。

下面我们在修改的时候就可以只修改JavaScript对象，而不用操作DOM节点：


        //改变数据
        var pet = {
            name: '喵喵',
            age: 4,
            tag: 'cat'
        };

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/797120