理解VUE实现MVVM架构的方式

左手的ㄟ右手 2023-06-16 13:55 1阅读 0赞

## MVVM架构 ##

MVVM架构是Model-View-ViewModel的简写，是一种软件设计模式，将应用程序分成3个层次：

*  Model （模型）：可以在Model中定义数据修改和操作的业务逻辑
 *  View （视图）：代表UI 组件，可以理解为DOM
 *  ViewModel （视图模型） ：是同步View 和 Model的对象

MVVM架构要实现的是数据和视图的分离，并通过视图模型作为桥梁，来同步数据和视图，开发者只需关注业务逻辑，不需要手动进行繁琐的DOM操作。  
更简单的说就是通过中间层视图模型来实现数据和视图的自动同步。

## Vue.js ##

Vue是一套构建用户界面的渐进式框架,是目前很火的一个JavaScript MVVM库。  
Vue中ViewModel就是一个Vue实例，它是Vue.js的核心。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]

## 理解VUE实现MVVM的方式 ##

VUE将数据保存成纯js对象（类似JSON格式），观察到数据的变化，就对视图对应的内容进行更新。

> 数据来源可以是通过后台api请求到的，websocket等方式接收到的，可以是浏览器存储的（如：localStorage），也可以是前端自己定义的。

VUE通过模板来实现虚拟视图，监听到视图的变化，就通知数据发生变化。

> 模板看起来很像DOM，是 HTML、表达式、指令组合起来的特殊语法的字符串，模板被Vue转换为一个JS函数(render渲染函数)，生成虚拟DOM,最终转换为html渲染页面。

#### 原理 ####

VUE用`数据劫持结合发布者-订阅者模式`的方式实现MVVM模式的。通过`Object.defineProperty()`来劫持数据对象各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

当执行 new Vue() 时，Vue 就进入了初始化阶段,实例化后有3个部分来实现实现数据与视图的同步：

1.  Observer 数据监听器/观察者  
    劫持并监听数据 ：负责遍历data选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能。
2.  Compile 解析器  
    对元素节点进行遍历，对指令和插值等进行解析，初始化视图，并订阅数据更新视图。
3.  Watcher 订阅者  
    Watcher将数据监听器和指令解析器连接起来，数据的属性变动时，执行指令绑定的相应回调函数，更新视图。

数据的订阅者可能不止一个，所以需要有一个消息订阅器Dep来收集订阅者，Dep负责添加订阅者和遍历订阅者列表通知订阅者更新视图。  
具体说当数据发生变化时，Observer 中的 set 方法被触发，在set 方法中调用Dep.notify()，Dep开始遍历所有的订阅者，并调用订阅者的 update方法更新视图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
现在开始模拟实现VUE的数据绑定，首先定义一个视图，按照Vue模板的语法写这么一段html代码

<div id="app">
      <input type='text' v-model='title'>
      <p id="title">{
       {title}}</p>
      <p id="title2">{
       {title}}</p>
    </div>

![在这里插入图片描述][2019112517534454.png]  
在这里我们期望的是在js中定义title的值，视图中不需通过dom就能够显直接示这个值，即视图中有两个title的订阅者，input定义了一个属性v-model将用来实现双向数据绑定（在input中输入自动同步title），后面我们将用Compile解析器来解析指令v-model和用\{ \{\}\}包裹的数据。

##### 1、模拟创建一个Vue构造函数,生成一个实例 #####

##### 2、劫持并监听数据 #####

在数据劫持后，myVue的变化如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]  
在数据劫持后，获取数据和修改数据时将触发get和set方法。  
![在这里插入图片描述][20191126103250994.png]

##### 3、解析指令，初始化视图 #####

//修改Vue构造函数
    function Vue(options){ 
      ...
      //B 渲染视图中的数据
      let childNodes=document.getElementById(this.id).childNodes;
      Object.keys(childNodes).forEach((i)=>compile(childNodes[i], this));
      ...
    };
    //解析指令，初始化视图
    function compile (node, vm){ 
      if (node.nodeType === 1) { 
        // 1、遍历并解析节点属性,被解析的属性成为指令
        let attr=node.attributes;
        Object.keys(attr).forEach(i=>{ 
          //解析v-model指令
          if(attr[i].nodeName === 'v-model'){ 
            let attrName=attr[i].nodeValue;
            node.value = vm.data[attrName];  // 给节点的value属性赋值为v-model指定的数据的值
            node.removeAttribute('v-model');　　//移除v-model
            // 在这里监听input事件...
          }
          //解析其他指令...
        });
        //2、遍历元素中的text节点,替换掉节点中的{ {}}
        Object.keys(node.childNodes).forEach(i=>{ 
          let childNode=node.childNodes[i];
          if(childNode.nodeType === 3) { 
            if(/\{\{(.*)\}\}/.test(childNode.nodeValue)) { 
              let dataKey = RegExp.$1;
              childNode.nodeValue = vm.data[dataKey]; //给节点赋值,替换掉{ {}}
              //在这里新建一个订阅者...
            }
          }
        })
      }
    };

![在这里插入图片描述][20191126161317991.png]  
到这里数据就渲染出来了，但是通过input修改数据时不会有响应，下面来实现双向数据绑定

##### 4、结合调度员和订阅者实现双向数据绑定 #####

首先修改函数compile，①监听input事件 ②根据订阅了数据的dom新建订阅者

// 容纳订阅者的消息订阅器 Dep
      class Dep { 
        constructor() { 
          this.subs = [];
          this.target = null;
        };
        addSub(sub) { 
          this.subs.push(sub);
          console.log('被添加的订阅者是：', sub);
        };
        notify() { 
          this.subs.forEach(sub=>sub.update());
          console.log('要通知的订阅者：', this.subs);
        }
      };
    
      // 订阅者
      class Watcher { 
        constructor(vm, node, name) { 
          Dep.target = this;
          this.name = name;
          this.node = node;
          this.vm = vm;
          this.update();
          Dep.target = null;
        };
        update() { 
          this.value = this.vm[this.name];  //给Watcher实例value属性赋值，同时将触发改数据的get方法
          this.node.nodeValue = this.value;  //更新视图
        };
      };
      function compile (node, vm){ 
        ...
        // 监听input事件
        node.addEventListener('input', function(e){ 
          vm[attrName] = e.target.value;  // 给相应的data属性赋值，触发绑定的set方法
        });
        ...
        //新建一个订阅者
        new Watcher(vm, childNode, dataKey);
        ...
    }

接着修改observer函数

![在这里插入图片描述][20191126172627709.gif]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200904104703458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191123123125294.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[2019112517534454.png]: https://img-blog.csdnimg.cn/2019112517534454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191126102035764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[20191126103250994.png]: https://img-blog.csdnimg.cn/20191126103250994.png
[20191126161317991.png]: https://img-blog.csdnimg.cn/20191126161317991.png
[20191126172627709.gif]: https://img-blog.csdnimg.cn/20191126172627709.gif