视图模板引擎——Vue【双向绑定】原理剖析

喜欢ヅ旅行 2021-10-01 04:18 291阅读 0赞

首先我们来了解一下**MVC**、**MVP**、**MVMM**这三大架构模式在前端角度上的理解。

**MVC**分别是 Model（模型）、View（视图）、Controller（控制器）三个模块。View（视图层）最主要完成前端的数据展示，Controller（控制层）是对数据的接收和触发事件的接收和传递，Model（模型层）则是对数据的储存和处理，再传递给视图层相应或者展示。如下图所示，整个过程是单链条的传递，在前端开发中多将业务逻辑写在View层，使得View层比较厚，而Controller层比较薄。  
缺点：  
1、 开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。

2、大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。  
　　  
3、 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
**MVP**是Model（模型）、View（视图）、Presenter（表示器）组成。MVP架构模式最主要是针对Android的MVC架构模式进行改进的，MVP与MVC最不同的一点是M与V是不直接关联的也是就Model与View不存在直接关系，这两者之间间隔着的是Presenter层，其负责调控View与Model之间的间接交互。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]  
**MVVM** 架构模式最主要是针对前端和iOS的MVC架构模式进行改进的，减轻Controller层或者View层的压力，实现更加清晰化代码。通过对ViewModel层的封装：封装业务逻辑处理，封装网络处理、封装数据缓存等，让逻辑处理分离出来，并且不需要处理Model数据，使得Controller层或者View层结构简单，条理清晰。MVVM模式的优点在于当view和viewmodel的双向绑定，当数据改变后不需要改修改DOM结构。MVVM的实现原理：利用**Object.defineProperty()**，该方法有**get**、**set**两个属性方法，从而获取对象属性的值，给对象属性重新赋值。  
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

**视图变化更新数据，数据变化更新视图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]

Vue是框架吗？算是吧。

Vue的核心定位并不是一个框架，设计上也没有完全遵循**MVVM**模式，Vue的核心功能强调的是状态到界面的映射，对于代码的结构组织并不重视， 所以单纯只使用其核心功能时，它并不是一个框架，而更像一个**视图模板引擎**。

Vue的使用方式——渐进式，那么渐进式是什么意思？

在**声明式渲染**（视图模板引擎）的基础上，我们可以通过**添加组件系统**、**客户端路由**、**大规模状态管理**、**构建工具**来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。

那么我们来分析一下Vue的双向绑定到底是什么？

下面的代码是使用**v-model**命令实现的双向绑定。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>v-model</title>
    </head>
    <body>
    <div id="app">
        <input type="text" v-model="msg">
        <p>{
       {msg}}</p>
        <select v-model="leval">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <p>{
       {leval}}</p>
    </div>
    </body>
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script> let vm=new Vue({ el:"#app", data:{ msg:"", leval:1 } }) </script>
    </html>

那么这样实现的原理是什么？

Vue的双向绑定是由**数据劫持**结合**发布者－订阅者模式**实现的，那么什么是数据劫持？vue是如何进行数据劫持的？说白了就是通过**Object.defineProperty()来劫持对象属性的setter**和**getter**操作，在数据变动时做你想要做的事情。

我们可以看一下通过控制台梳理一个定义在vue初始化数据上的对象是什么．

let vm=new Vue({ 
            el:"#app",
            data:{ 
                msg:"",
                leval:1,
                name:{ 
                    le:'maomin'
                }
            },
            created(){ 
                console.log(this.name)
            }
    
        })

![在这里插入图片描述][20190814150556910.png]  
如上图所示：name对象有两个方法。分别是get、set。那么这两个方法就是Vue通过Object.definePreperty()进行数据劫持得到的。

**这个方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。**

Object.definePreperty(data,key,desriptor)
    
    //data 要在其上定义属性的对象；
    //key  要定义或修改的属性的名称；（这里的类型是String）
    //descriptor 将被定义或修改的属性描述符；（一般为set、get方法的对象组合）

那么我们给个关于Object.definePreperty（）方法的例子看一下。

先来一个这个。

var person = { 
    		name:'maomin'
    	};
    	console.log('这个帅哥叫'+person.name)//这个帅哥叫maomin

但是你想在执行console.log的同时，加上他的女朋友是M。那么可以使用Object.defineProperty()方法来执行。

var person = { 
    		name:'maomin'
    	}
    	var name1 = ''
    	Object.defineProperty(person,'name',{ 
    		set:function (val) { 
    			name1=val
    			console.log('这是set方法')
    			console.log('他的名字叫'+val)
    		},
    		get:function () { 
    			console.log('这是get方法')
    		   return name1 +'他的女朋友叫M'
    		}
    	})
    	console.log('这个帅哥叫'+person.name)
    	/* 输出结果： 这是get方法 这个帅哥叫他的女朋友叫M */

但你会发现没有执行set()方法，那么我们这样试试。

var person = { }
        var name1 = ''
        Object.defineProperty(person,'name',{ 
    		set:function (val) { 
    			name1=val
    			console.log('这是set方法')
    			console.log('他的名字叫'+val)
    		},
    		get:function () { 
    			console.log('这是get方法')
    		   return name1 +'他的女朋友叫M'
    		}
    	})
    	person.name ='maomin' //在Object.defineProperty（）后赋初始值
    	console.log('这个帅哥叫'+','+person.name)
    	/* 输出结果： 这是set方法 他的名字叫maomin 这是get方法 这个帅哥叫maomin,他的女朋友叫M */

这样set方法才会执行。  
所以你在针对一个对象修改属性值的时候一定要在Object.defineProperty（）方法后给属性赋初始值。

那么讲完初步了解数据劫持了，那么什么是发布者—订阅者设计模式呢？

比如说根据微信订阅号的例子来讲，如果你是订阅号文章的发表者，那么怎样才能让别人实时看到你的发表的文章呢？那就是这个人已经关注了你的订阅号。这样你发表了文章，关注的人才会看到。所以，我们的思路大体是:

1、初始化发布者、订阅者。
    2、订阅者需要注册到发布者，发布者发布消息时，依次向订阅者发布消息。

我们在前面看到了Object.defineProperty()中的set()方法当属性变化时会触发。那么可以利用这个特性可以把需要更新的方法放在set里面，这样就实现数据层更新，进而页面层就更新了。页面层更新，数据层更新使用事件监听就可以了。

实现了双向绑定，那么我们怎么样实现数据劫持监听呢？

这里需要三步：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
     
    2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
     
    3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

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

## 1、observer监听器 ##

下面我们将通过observer()方法进行遍历向下找到所有的属性，并通过defineReactive()方法进行数据劫持监听。

//对所有属性都要蒋婷,递归遍历所有属性
    function defineReactive(data,key,val) { 
        observer(val);  //递归遍历所有的属性,如果不加的话，遍历不了book1内部的元素
        Object.defineProperty(data,key,{ 
        	// writable: false, //当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。当定义了一个属性的set、get描述符，则JavaScript会忽略该属性的value、writable属性。也就是说这俩对儿属于互斥的关系.
            enumerable:true,         //当且仅当该属性的 enumerable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。
            configurable:true,       //当且仅当该属性的configurable为true时，该属性才能够出现在对象的枚举属性中
            set:function(value) { 
                val = value;
                console.log('属性'+key+'已经被监听,现在值为:"'+value.toString()+'"');
            },
            get:function() { 
                return val;
            },
        })
    }
     
    function observer(data) { 
        if(!data || typeof data !== 'object') { 
            return;
        }
        Object.keys(data).forEach(function(key){ 
            defineReactive(data,key,data[key]);
        });
    }
     
    var language = { 
        book1: { 
            name: ''
        },
        book2: '',
        name2:'',
        name3:''
    };
    observer(language);
    language.book1.name = 'Vue';
    language.name2 = 'HTML';
    language.name2 = 'js';
    language.book2 = 'css'; 
    /* 输出结果： 属性name已经被监听了，现在值为：“Vue” 属性name2已经被监听了，现在值为：“HTML” 属性name2已经被监听了，现在值为：“js” 属性book2已经被监听了，现在值为：“css” */

我们需要一个可以容纳消息订阅者的消息订阅器Dep，订阅器主要收集消息订阅者，然后在属性变化时执行相应订阅者的更新函数，那么消息订阅器Dep需要有一个容器，用来存放消息订阅者．

//对所有属性都要蒋婷,递归遍历所有属性
    function defineReactive(data,key,val) { 
        observer(val);  //递归遍历所有的属性,如果不加的话，遍历不了book1内部的元素
        var dep = new Dep();
        Object.defineProperty(data,key,{ 
        	// writable: false, //当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。当定义了一个属性的set、get描述符，则JavaScript会忽略该属性的value、writable属性。也就是说这俩对儿属于互斥的关系.
            enumerable:true,         //当且仅当该属性的 enumerable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。
            configurable:true,       //当且仅当该属性的configurable为true时，该属性才能够出现在对象的枚举属性中
            set:function(value) { 
            	  if (val === value) { 
                    return;
                }
                val = value;
                console.log('属性' + key + '已经被监听了，现在值为：“' + value.toString() + '”');
                dep.notify(); // 如果数据变化，通知所有订阅者
                // val = value;
                // console.log('属性'+key+'已经被监听,现在值为:"'+value.toString()+'"');
            },
            get:function() { 
                  if (Dep.target) {     //Watcher初始化触发
                    dep.addSub(Dep.target); // 在这里添加一个订阅者
                }
                return val;
            },
        })
    }
     
    function observer(data) { 
        if(!data || typeof data !== 'object') { 
            return;
        }
        Object.keys(data).forEach(function(key){ 
            defineReactive(data,key,data[key]);
        });
    }
     
    function Dep() { 
        this.subs = [];
    }
    
    
    Dep.prototype = {                         
        addSub:function(sub) { 
            this.subs.push(sub);
        },
        notify:function() { 
            this.subs.forEach(function(sub) { 
                sub.update();        //通知每个订阅者检查更新
            })
        }
    }
    Dep.target = null;
    
    
    var language = { 
        book1: { 
            name: ''
        },
        book2: '',
        name2:'',
        name3:''
    };
    observer(language);
    language.book1.name = 'Vue';
    language.name2 = 'HTML';
    language.name2 = 'js';
    language.book2 = 'css';

为了后面的watcher,我们先将上面所有代码整体修改一下。得到下面最终的**Observer**:

## 2、watcher订阅者 ##

订阅者Wahcher在初始化时要将自己添加到订阅器Dep中。

我们已经知道监听器Observer是在get函数中执行了添加订阅者的操作的，所以我们只需要在订阅者Watcher在初始化时触发相对应的get函数来执行添加订阅者的操作即可。那么怎么触发对应的get函数呢？我们只需要获取对应的属性值，就可以通过Object.defineProperty( )触发对应的get了。

在这里需要注意一个细节，我们只需要在订阅者初始化时才执行添加订阅者，所以我们需要一个判断，在Dep.target上缓存一下订阅者，添加成功后去除就行了。

在这里我们已经将上面的Observer已经修改，这里不再讲述。

## 3、整合（将订阅者跟监听器连接起来） ##

var ele = document.querySelector('#name');
        var selfVue = new SelfVue({ 
            name: '你好，maomin'
        }, ele, 'name');
    
        window.setTimeout(function () { 
            selfVue.name = '你也好';
        }, 5000);

以上代码是**展示页面**。

接下来我们将写**创建初始对象**的逻辑代码：

这样一个超简易的Vue 双向绑定这样就实现了，这里都是死的数据，没有写compile指令解析器。

上面的双向绑定demo中，我们发现整个过程都没有解析dom节点，而是固定某个节点进行替换数据

## 4、Compile指令解析器 ##

**指令解析器作用：**

1.解析模板指令，并替换模板数据，初始化视图  
2.将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器

这时在**创建初始对象**修改

**展示页面**中修改：

<body>
        <div id="app">
            <h1>{
       {title}}</h1>
            <h2>{
       {name}}</h2>
            <h3>{
       {content}}</h3>
        </div>
    </body>
    <script src="js/observer2.js"></script>
    <script src="js/Watcher1.js"></script>
    <script src="js/compile1.js"></script>
    <script src="js/index3.js"></script>
     
     
    <script> var selfVue = new SelfVue({ el:'#app', data:{ title:'title1', name:'name1', content:'content1' } }); window.setTimeout(function() { selfVue.title = 'title2'; selfVue.name = 'name2'; selfVue.content = 'content2' },5000); </script>

最后，一个基本的Vue数据双向绑定就这样实现了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210812/ffce477e67ae431283c21ebbeaa9f5c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210812/ec6fba7cf4404847b647db24dd87feef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210812/07b63b1f27cd4fa3b8bef64966e4ef04.png
[20190814150556910.png]: /images/20210812/ff8c957b9e2d4ad3b212dd4dfbcc35e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 3]: /images/20210812/877aaf6904d748e8bc884f683bb2aec1.png