VueJS、Angular、React原理

最新推荐文章于 2024-12-20 10:49:26 发布

x_chengqq

最新推荐文章于 2024-12-20 10:49:26 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 javascript 文章标签：前端框架 angular

49 篇文章

订阅专栏

29 篇文章

订阅专栏

本文介绍了MVVM框架的基本概念及其在前端开发中的应用。探讨了MVVM模式如何通过双向数据绑定实现Model与View的分离，提高了代码的可维护性和可读性。并通过实例展示了使用MVVM模式简化DOM操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'
        };