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