Vue源码分析

青旅半醒 2022-08-29 09:37 180阅读 0赞

### 文章目录 ###

*   *  Vue源码分析
     *   *  vue源码
         *  Object.defineProperty
         *  MVVM
         *   *  MVVM 类的实现
             *  模板编译 Compile 类的实现
             *   *  1、解析根节点内的 Dom 结构
                 *  2、编译文档碎片中的结构
                 *  3、CompileUtil 对象中指令方法的实现
             *  观察者 Watcher 类的实现
             *  发布订阅 Dep 类的实现
             *  数据劫持 Observer 类的实现
             *  验证 MVVM
         *  虚拟dom
         *   *  什么是dom?
         *  DIFF算法

## Vue源码分析 ##

### vue源码 ###

*  Object.defineProperty
 *  数据劫持Observer
 *  依赖Dep
 *  Watcher
 *  xxxMinxin（混合）
 *  proxy（代理）
 *  defineReactive(响应式)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

### Object.defineProperty ###

*  动态给对象添加属性
 *  实现属性的访问拦截  
    访问属性 obj.name 一定会调用get方法  
    写入属性 obj.name=xxx 一定会调用set方法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue源码分析demo</title>
        
        <meta name="viewport" content="width=device-width,initial-scale=1" />
    </head>
    <body>
    	<input type="text" id="input" />
    	<div id="app"></div>
    	<script> var obj={ //name:"jack" } var name="jack2"; //动态地给obj添加属性name //第一个参数--对象 第二个参数--属性名 第三个--get set Object.defineProperty(obj,'name',{ get:function(){ console.log("读取属性"); return name; } set:function(v){ console.log("写入属性"); name = v; document.querySelecter("#app").innerHTML = v; } }) //类似双向数据绑定 document.querySelecter("#input").onkeyup = function(e){ obj.name = e.target.value; //document.querySelecter("#app").innerHTML = e.target.value; //写入属性 } document.querySelecter("#app").innerHTML = obj.name; //读取属性 </script>
    </body>
    </html>

### MVVM ###

> MVVM 设计模式，是由 MVC（最早来源于后端）、MVP 等设计模式进化而来，M - 数据模型（Model），VM - 视图模型（ViewModel），V - 视图层（View）。

在 MVC 模式中，除了 Model 和 View 层以外，其他所有的逻辑都在 Controller 中，Controller 负责显示页面、响应用户操作、网络请求及与 Model 的交互，随着业务的增加和产品的迭代，Controller 中的处理逻辑越来越多、越来越复杂，难以维护。为了更好的管理代码，为了更方便的扩展业务，必须要为 Controller “瘦身”，需要更清晰的将用户界面（UI）开发从应用程序的业务逻辑与行为中分离，MVVM 为此而生。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]

new Vue({
    	el:
    })

`Vue`是什么？ — `函数`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]

*  vue是不是一个mvvm框架？
 *  `model`—数据模型 数据 data
 *  `view`—视图–展示 \{ \{xxx\}\}
 *  `viewmodel`—数据驱动

**proxy**

*  obj.name
 *  vm–vue实例
 *  data–定义的属性
 *  把data中的属性定义在vm实例上 vm.\_data.xxx

**页面渲染过程**

*  取data里的数据定义在vm实例上
 *  遍历data属性—对每一个属性进行监听–Observer
 *  在Observer里使用defineReactive把属性定义成响应式 \{ \{obj.name\}\}  
    读取属性–进入defineReactive定义的拦截器中  
    更新属性–进入defineReactive定义的拦截器中  
    defineReactive每定义一个属性都有一个Dep 是不是闭包？  
    name属性里面也有一个Dep
 *  什么是Dep？  
    用来保存Watcher（渲染Watcher），通知Watcher更新页面
 *  当data初始化完毕后  
    name–dep，页面渲染时\{ \{obj.name\}\}会执行渲染Watcher，Dep.target是什么？  
    执行渲染Watcher—执行get()—putTarget(this)—Dep.target==渲染Watcher  
    进入defineReactive拦截器—添加依赖关系 属性—dep—Watcher
 *  响应式如何实现？  
    修改obj.name=xxx,会进入defineReactive的set方法—dep.notify()—通知所有Watcher更新–虚拟dom–diff–渲染页面

在 Vue 的 MVVM 设计中，我们主要针对 `Compile（模板编译）`、`Observer（数据劫持）`、`Watcher（数据监听）`和 `Dep（发布订阅）`几个部分来实现，核心逻辑流程可参照下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]

#### MVVM 类的实现 ####

在 Vue 中，对外只暴露了一个名为 Vue 的构造函数，在使用的时候 new 一个 `Vue 实例`，然后传入了一个 `options 参数`，类型为一个对象，包括`当前 Vue 实例的作用域 el`、`模板绑定的数据 data` 等等。

我们模拟这种 MVVM 模式的时候也构建一个类，名字就叫 MVVM，在使用时同 Vue 框架类似，需要通过 new 指令创建 MVVM 的实例并传入 options。  
文件：MVVM.js

class MVVM { 
        constructor(options) { 
            // 先把 el 和 data 挂在 MVVM 实例上
            this.$el = options.el;
            this.$data = options.data;
    
            if (this.$el) { 
                // $data数据劫持
                new Observer(this.$data);
    
                // 将数据代理到实例上 vm.message = "hello"
                this.proxyData(this.$data);
    
                // 用数据和元素进行编译
                new Compile(this.$el, this);
            }
        }
        proxyData(data) {  // 代理数据的方法
            Object.keys(data).forEach(key => { 
                Object.defineProperty(this, key, { 
                    get() { 
                        return data[key];
                    },
                    set(newVal) { 
                        data[key] = newVal;
                    }
                });
            });
        }
    }

通过上面代码，我们可以看出，在我们 new 一个 MVVM 的时候，在参数 options 中传入了`一个 Dom 的根元素节点和数据 data` 并挂在了当前的 MVVM 实例上。

当存在根节点的时候，通过 `Observer类` 对 data 数据进行了劫持，并通过 MVVM 实例的方法 `proxyData` 把 data 中的数据挂在当前 MVVM 实例上，同样对数据进行了劫持，是因为我们在获取和修改数据的时候可以直接通过 this 或 this.$data，在 Vue 中实现数据劫持的核心方法是 `Object.defineProperty`，我们也使用这个方式通过添加 `getter` 和 `setter` 来实现数据劫持。

最后使用 `Compile 类`对模板和绑定的数据进行了解析和编译，并渲染在根节点上，之所以数据劫持和模板解析都使用类的方式实现，是因为代码方便维护和扩展，其实不难看出，`MVVM 类其实作为了 Compile 类和 Observer 类的一个桥梁`。

#### 模板编译 Compile 类的实现 ####

Compile 类在创建实例的时候需要传入两个参数，第一个参数是当前 MVVM 实例作用的根节点，第二个参数就是 MVVM 实例，之所以传入 MVVM 的实例是为了更方便的获取 MVVM 实例上的属性。

在 Compile 类中，我们会尽量的把一些公共的逻辑抽取出来进行最大限度的复用，避免冗余代码，提高维护性和扩展性，我们把 Compile 类抽取出的实例方法主要分为两大类，辅助方法和核心方法，在代码中用注释标明。

##### 1、解析根节点内的 Dom 结构 #####

文件：Compile.js

class Compile { 
        constructor(el, vm) { 
            this.el = this.isElementNode(el) ? el : document.querySelector(el);
            this.vm = vm;
    
            // 如过传入的根元素存在，才开始编译
            if (this.el) { 
                // 1、把这些真实的 Dom 移动到内存中，即 fragment（文档碎片）
                let fragment = this.node2fragment(this.el);
            }
        }
    
        /* 辅助方法 */
        // 判断是否是元素节点
        isElementNode(node) { 
            return node.nodeType === 1;
        }
    
        /* 核心方法 */
        // 将根节点转移至文档碎片
        node2fragment(el) { 
            // 创建文档碎片
            let fragment = document.createDocumentFragment();
            // 第一个子节点
            let firstChild;
    
            // 循环取出根节点中的节点并放入文档碎片中
            while (firstChild = el.firstChild) { 
                fragment.appendChild(firstChild);
            }
            return fragment;
        }
    }

上面编译模板的过程中，前提条件是必须存在根元素节点，传入的根元素节点允许是一个真实的 Dom 元素，也可以是一个选择器，所以我们创建了辅助方法 `isElementNode` 来帮我们判断传入的元素是否是 Dom，如果是就直接使用，是选择器就获取这个 Dom，最终将这个根节点存入 this.el 属性中。

解析模板的过程中为了性能，我们应取出根节点内的子节点存放在文档碎片中（内存），需要注意的是将一个 Dom 节点内的子节点存入文档碎片的过程中，会在原来的 Dom 容器中删除这个节点，所以在遍历根节点的子节点时，永远是将第一个节点取出存入文档碎片，直到节点不存在为止。

##### 2、编译文档碎片中的结构 #####

在 Vue 中的模板编译的主要就是两部分，也是浏览器无法解析的部分，元素节点中的指令和文本节点中的 Mustache 语法（双大括号）。  
文件：Compile.js —— 完善

class Compile { 
        constructor(el, vm) { 
            //dom
            this.el = this.isElementNode(el) ? el : document.querySelector(el);
            this.vm = vm;
    
            // 如过传入的根元素存在，才开始编译
            if (this.el) { 
                // 1、把这些真实的 Dom 移动到内存中，即 fragment（文档碎片）
                let fragment = this.node2fragment(this.el);
    
                // ********** 以下为新增代码 **********
                // 2、将模板中的指令中的变量和 { {}} 中的变量替换成真实的数据
                this.compile(fragment);
    
                // 3、把编译好的 fragment 再塞回页面中
                this.el.appendChild(fragment);
                // ********** 以上为新增代码 **********
            }
        }
    
        /* 辅助方法 */
        // 判断是否是元素节点
        isElementNode(_node) { 
            return _node.nodeType === 1;
        }
    
        // ********** 以下为新增代码 **********
        // 判断属性是否为指令
        isDirective(name) { 
            return name.includes("v-");
        }
        // ********** 以上为新增代码 **********
    
        /* 核心方法 */
        // 将根节点转移至文档碎片
        node2fragment(el) { 
            // 创建文档碎片
            let fragment = document.createDocumentFragment();
            // 第一个子节点
            let firstChild;
    
            // 循环取出根节点中的节点并放入文档碎片中
            while (firstChild = el.firstChild) { 
                fragment.appendChild(firstChild);
            }
            return fragment;
        }
    
        // ********** 以下为新增代码 **********
        // 解析文档碎片
        compile(fragment) { 
            // 当前父节点节点的子节点，包含文本节点，类数组对象
            let childNodes = fragment.childNodes;
    
            // 转换成数组并循环判断每一个节点的类型
            Array.from(childNodes).forEach(node => { 
                if (this.isElementNode(node)) {  // 是元素节点
                    // 递归编译子节点
                    this.compile(node);
    
                    // 编译元素节点的方法
                    this.compileElement(node);
                } else {  // 是文本节点
                    // 编译文本节点的方法
                    this.compileText(node);
                }
            });
        }
        // 编译元素
        compileElement(node) { 
            // 取出当前节点的属性，类数组
            let attrs = node.attributes;
            Array.from(attrs).forEach(attr => { 
                // 获取属性名，判断属性是否为指令，即含 v-
                let attrName = attr.name;
    
                if (this.isDirective(attrName)) { 
                    // 如果是指令，取到该属性值得变量在 data 中对应得值，替换到节点中
                    let exp = attr.value;
    
                    // 取出方法名
                    let [, type] = attrName.split("-");
    
                    // 调用指令对应得方法
                    CompileUtil[type](node, this.vm, exp);
                }
            });
    
        }
        // 编译文本
        compileText(node) { 
            // 获取文本节点的内容
            let exp = node.textContent;
    
            // 创建匹配 { {}} 的正则表达式
            //let reg = /\{\{([^}+])\}\}/g;
            //“.”表示任意字符。“+”表示前面表达式一次乃至多次。“?”表示匹配模式是非贪婪的。
            let reg = /\{\{(.+?)\}\}/g;
    
            // 如果存在 { {}} 则使用 text 指令的方法
            if (reg.test(exp)) { 
                CompileUtil["text"](node, this.vm, exp);
            }
        }
        // ********** 以上为新增代码 **********
    }

上面代码新增内容得主要逻辑就是做了两件事：

*  调用 `compile` 方法对 fragment 文档碎片进行编译，即替换内部指令和 Mustache 语法中变量对应的值；  
    将编译好的 fragment 文档碎片塞回根节点。
 *  在第一个步骤当中逻辑是比较繁琐的，首先在 compile 方法中获取所有的子节点，循环进行编译，如果是元素节点需要递归 compile，传入当前元素节点。在这个过程当中抽取出了两个方法，`compileElement 和 compileText 用来对元素节点的属性和文本节点进行处理`。

`compileElement` 中的核心逻辑就是处理指令，取出元素节点所有的属性判断是否是指令，是指令则调用指令对应的方法。`compileText` 中的核心逻辑就是取出文本的内容通过正则表达式匹配出被 Mustache 语法的 “\{ \{ \}\}” 包裹的内容，并调用处理文本的 text 方法。

文本节点的内容有可能存在 “\{ \{ \}\} \{ \{ \}\} \{ \{ \}\}”，正则匹配默认是贪婪的，为了防止第一个 “\{” 和最后一个 “\}” 进行匹配，所以在正则表达式中应使用非贪婪匹配。

在调用指令的方法时都是调用的 CompileUtil 下对应的方法，我们之所以单独把这些指令对应的方法抽离出来存储在 CompileUtil 对象下的目的是为了解耦，因为后面其他的类还要使用。

##### 3、CompileUtil 对象中指令方法的实现 #####

CompileUtil 中存储着所有的指令方法及指令对应的更新方法，由于 Vue 的指令很多，我们这里只实现比较典型的 v-model 和 “\{ \{ \}\}” 对应的方法，考虑到后续更新的情况，我们统一把设置值到 Dom 中的逻辑抽取出对应上面两种情况的方法，存放到 CompileUtil 的 updater 对象中。  
文件：CompileUtil.js

CompileUtil = { };
    
    // 更新Dom节点方法
    CompileUtil.updater = { 
        // 文本更新
        textUpdater(node, value) { 
            node.textContent = value;
        },
        // 输入框更新
        modelUpdater(node, value) { 
            node.value = value;
        }
    };
    
    // 获取 data 值的方法
    CompileUtil.getVal = function (vm, exp) { 
        // 将匹配的值用 . 分割开，如 vm.data.a.b
        exp = exp.split(".");
    
        // 归并取值
        return exp.reduce((prev, next) => { 
            return prev[next];
        }, vm.$data);
    };
    
    // 获取文本 { {}} 中变量在 data 对应的值
    CompileUtil.getTextVal = function (vm, exp) { 
        // 使用正则匹配出 { { }} 间的变量名，再调用 getVal 获取值
        return exp.replace(/\{\{([^}]+)\}\}/g, (...args) => { 
            return this.getVal(vm, args[1]);
        });
    };
    
    // 设置 data 值的方法
    CompileUtil.setVal = function (vm, exp, newVal) { 
        exp = exp.split(".");
        return exp.reduce((prev, next, currentIndex) => { 
            // 如果当前归并的为数组的最后一项，则将新值设置到该属性
            if(currentIndex === exp.length - 1) { 
                return prev[next] = newVal
            }
    
            // 继续归并
            return prev[next];
        }, vm.$data);
    }
    
    // 处理 v-model 指令的方法
    CompileUtil.model = function (node, vm, exp) { 
        // 获取赋值的方法
        let updateFn = this.updater["modelUpdater"];
    
        // 获取 data 中对应的变量的值
        let value = this.getVal(vm, exp);
    
        // 添加观察者，作用与 text 方法相同
        new Watcher(vm, exp, newValue => { 
            updateFn && updateFn(node, newValue);
        });
    
        // v-model 双向数据绑定，对 input 添加事件监听
        node.addEventListener('input', e => { 
            // 获取输入的新值
            let newValue = e.target.value;
    
            // 更新到节点
            this.setVal(vm, exp, newValue);
        });
    
        // 第一次设置值
        updateFn && updateFn(node, value);
    };
    
    
    // 处理文本节点 { {}} 的方法
    CompileUtil.text = function (node, vm, exp) { 
        // 获取赋值的方法
        let updateFn = this.updater["textUpdater"];
    
        // 获取 data 中对应的变量的值
        let value = this.getTextVal(vm, exp);
    
        // 通过正则替换，将取到数据中的值替换掉 { { }}
        exp.replace(/\{\{(.+?)\}\}/g, (...args) => { 
            // 解析时遇到了模板中需要替换为数据值的变量时，应该添加一个观察者
            // 当变量重新赋值时，调用更新值节点到 Dom 的方法
            new Watcher(vm, args[1], newValue => { 
                // 如果数据发生变化，重新获取新值
                updateFn && updateFn(node, newValue);
            });
        });
    
        // 第一次设置值
        updateFn && updateFn(node, value);
    };

这部分的整个思路就是在 Compile 编译模板后处理 v-model 和 “\{ \{ \}\}” 时，其实都是用 data 中的数据替换掉 fragment 文档碎片中对应的节点中的变量。因此会经常性的获取 data 中的值，在更新节点时又会重新设置 data 中的值，所以我们抽离出了三个方法 `getVal`、`getTextVal` 和 `setVal` 挂在了 `CompileUtil 对象`下。

获取和设置 data 的值两个方法 getVal 和 setVal 思路相似，由于获取的变量层级不定，可能是 data.a，也可能是 data.obj.a.b，所以都是使用归并的思路，借用 `reduce 方法`实现的，区别在于 setVal 方法在归并过程中需要判断是不是归并到最后一级，如果是则设置新值，而 getTextVal 就是在 getVal 外包了一层处理 “\{ \{ \}\}” 的逻辑。

在这些准备工作就绪以后就可以实现我们的主逻辑，即对 Compile 类中解析的文本节点和元素节点指令中的变量用 data 值进行替换，还记得前面说针对 v-model 和 “\{ \{ \}\}” 进行处理，因此设计了 model 和 text 两个核心方法。

model和text两个方法逻辑相似，都获取了各自的 updater 中的方法，对值进行设置，并且在设置的同时为了后续 data 中的数据修改，视图的更新，创建了 Watcher 的实例，并在内部用新值重新更新节点，不同的是 Vue 的 v-model 指令在表单中实现了双向数据绑定，只要表单元素的 value 值发生变化，就需要将新值更新到 data 中，并响应到页面上。

所以我们的实现方式是给这个绑定了 v-model 的表单元素监听了 input 事件，并在事件中实时的将新的 value 值更新到 data 中，至于 data 中的改变后响应到页面中需要另外三个类 `Watcher、Observer 和 Dep` 共同实现，我们下面就来实现 Watcher 类。

#### 观察者 Watcher 类的实现 ####

在 CompileUtil 对象的方法中创建 Watcher 实例的时候传入了三个参数，即 MVVM 的实例、模板绑定数据的变量名 exp 和一个 callback，这个 callback 内部逻辑是为了更新数据到 Dom，所以我们的 Watcher 类内部要做的事情就清晰了，获取更改前的值存储起来，并创建一个 update 实例方法，在值被更改时去执行实例的 callback 以达到视图的更新。  
文件：Watcher.js

class Watcher { 
        constructor(vm, exp, callback) { 
            this.vm = vm;
            this.exp = exp;
            this.callback = callback;
    
            // 更改前的值
            this.value = this.get();
        }
        get() { 
            // 将当前的 watcher 添加到 Dep 类的静态属性上
            Dep.target = this;
    
            // 获取值触发数据劫持
            let value = CompileUtil.getVal(this.vm, this.exp);
    
            // 清空 Dep 上的 Watcher，防止重复添加
            Dep.target = null;
            return value;
        }
        update() { 
            // 获取新值
            let newValue = CompileUtil.getVal(this.vm, this.exp);
            // 获取旧值
            let oldValue = this.value;
    
            // 如果新值和旧值不相等，就执行 callback 对 dom 进行更新
            if(newValue !== oldValue) { 
                this.callback(newValue);
            }
        }
    }

看到上面代码一定有两个疑问：

*  使用 get 方法获取旧值得时候为什么要将当前的实例挂在 Dep 上，在获取值后为什么又清空了；
 *  update 方法内部执行了 callback 函数，但是 update 在什么时候执行。  
    这就是后面两个类 Dep 和 observer 要做的事情，我们首先来介绍 Dep，再介绍 Observer 最后把他们之间的关系整个串联起来。

#### 发布订阅 Dep 类的实现 ####

其实发布订阅说白了就是把要执行的函数统一存储在一个数组中管理，当达到某个执行条件时，循环这个数组并执行每一个成员。  
文件：Dep.js

class Dep { 
        constructor() { 
            this.subs = [];
        }
        // 添加订阅
        addSub(watcher) { 
            this.subs.push(watcher);
        }
        // 通知
        notify() { 
            this.subs.forEach(watcher => watcher.update());
        }
    }

在 Dep 类中只有一个属性，就是一个名为 subs 的数组，用来管理每一个 watcher，即 Watcher 类的实例，而 addSub 就是用来将 watcher 添加到 subs 数组中的，我们看到 notify 方法就解决了上面的一个疑问，Watcher 类的 update 方法是怎么执行的，就是这样循环执行的。  
接下来我们整合一下盲点：

*  Dep 实例在哪里创建声明，又是在哪里将 watcher 添加进 subs 数组的；
 *  Dep 的 notify 方法应该在哪里调用；
 *  Watcher 内容中，使用 get 方法获取旧值得时候为什么要将当前的实例挂在 Dep 上，在获取值后为什么又清空了。  
    这些问题在最后一个类 Observer 实现的时候都将清晰，下面我们重点来看最后一部分核心逻辑。

#### 数据劫持 Observer 类的实现 ####

还记得实现 MVVM 类的时候就创建了这个类的实例，当时传入的参数是 MVVM 实例的 data 属性，在 MVVM 中把数据通过 Object.defineProperty 挂到了实例上，并添加了 getter 和 setter，其实 Observer 类主要目的就是给 data 内的所有层级的数据都进行这样的操作。  
文件：Observer.js

class Observer { 
        constructor (data) { 
            this.observe(data);
        }
        // 添加数据监听
        observe(data) { 
            if(!data || typeof data !== 'object') { 
                return;
            }
    
            Object.keys(data).forEach(key => { 
                // 劫持（实现数据响应式）
                this.defineReactive(data, key, data[key]);
                this.observe(data[key]); // 深度劫持
            });
        }
        // 数据响应式
        defineReactive (object, key, value) { 
            let _this = this;
            // 每个变化的数据都会对应一个数组，这个数组是存放所有更新的操作
            let dep = new Dep();
    
            // 获取某个值被监听到
            Object.defineProperty(object, key, { 
                enumerable: true,
                configurable: true,
                get () {  // 当取值时调用的方法
                    Dep.target && dep.addSub(Dep.target);
                    return value;
                },
                set (newValue) {  // 当给 data 属性中设置的值适合，更改获取的属性的值
                    if(newValue !== value) { 
                        _this.observe(newValue); // 重新赋值如果是对象进行深度劫持
                        value = newValue;
                        dep.notify(); // 通知所有人数据更新了
                    }
                }
            });
        }
    }

在上面的代码中，`observe` 的目的是遍历对象，在内部对数据进行劫持，即添加 getter 和 setter，我们把劫持的逻辑单独抽取成 defineReactive 方法，需要注意的是 observe 方法在执行最初就对当前的数据进行了数据类型验证，然后再循环对象每一个属性进行劫持，目的是给同为 Object 类型的子属性递归调用 observe 进行深度劫持。

在 `defineReactive` 方法中，创建了 Dep 的实例，并对 data 的数据使用 get 和 set 进行劫持，还记得在模板编译的过程中，遇到模板中绑定的变量，就会解析，并创建 watcher，会在 Watcher 类的内部获取旧值，即当前的值，这样就触发了 get，在 get 中就可以将这个 watcher 添加到 Dep 的 subs 数组中进行统一管理，因为在代码中获取 data 中的值操作比较多，会经常触发 get，我们又要保证 watcher 不会被重复添加，所以在 Watcher 类中，获取旧值并保存后，立即将 Dep.target 赋值为 null，并且在触发 get 时对 Dep.target 进行了短路操作，存在才调用 Dep 的 addSub 进行添加。

而 data 中的值被更改时，会触发 set，在 set 中做了性能优化，即判断重新赋的值与旧值是否相等，如果相等就不重新渲染页面，不等的情况有两种，如果原来这个被改变的值是基本数据类型没什么影响，如果是引用类型，我们需要对这个引用类型内部的数据进行劫持，因此递归调用了 observe，最后调用 Dep 的 `notify` 方法进行通知，执行 notify 就会执行 subs 中所有被管理的 watcher 的 update，就会执行创建 watcher 时的传入的 callback，就会更新页面。

在 MVVM 类将 data 的属性挂在 MVVM 实例上并劫持与通过 Observer 类对 data 的劫持还有一层联系，因为整个发布订阅的逻辑都是在 data 的 get 和 set 上，只要触发了 MVVM 中的 get 和 set 内部会自动返回或设置 data 对应的值，就会触发 data 的 get 和 set，就会执行发布订阅的逻辑。

通过上面长篇大论的叙述后，这个 MVVM 模式用到的几个类的关系应该完全叙述清晰了，虽然比较抽象，但是细心琢磨还是会明白之间的关系和逻辑，下面我们就来对我们自己实现的这个 MVVM 进行验证。

#### 验证 MVVM ####

按照 Vue 的方式根据自己的 MVVM 实现的内容简单的写了一个模板如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MVVM</title>
    </head>
    <body>
        <div id="app">
            
            <input type="text" v-model="message">
            <div>{
       {message}}</div>
            <ul>
                <li>{
       {message}}</li>
            </ul>
            {
       {message}}
        </div>
    
        
        <script src="./js/Watcher.js"></script>
        <script src="./js/Observer.js"></script>
        <script src="./js/Compile.js"></script>
        <script src="./js/CompileUtil.js"></script>
        <script src="./js/Dep.js"></script>
        <script src="./js/MVVM.js"></script>
        <script> let vm = new MVVM({ el: '#app', data: { message: 'hello world!' } }); </script>
    </body>
    </html>

打开 Chrom 浏览器的控制台，在上面通过下面操作来验证：

*  输入 vm.message = “hello” 看页面是否更新；
 *  输入 vm.$data.message = “hello” 看页面是否更新；
 *  改变文本输入框内的值，看页面的其他元素是否更新。

通过上面的测试，相信应该理解了 MVVM 模式对于前端开发重大的意义，实现了双向数据绑定，实时保证 View 层与 Model 层的数据同步，并可以让我们在开发时基于数据编程，而最少的操作 Dom，这样大大提高了页面渲染的性能，也可以使我们把更多的精力用于业务逻辑的开发上。

参考文章：[https://www.jianshu.com/p/b87e6b689a3a][https_www.jianshu.com_p_b87e6b689a3a]感谢作者的分享！

源码链接：[https://gitee.com/monkeyhlj/vue-learning/tree/master/20210812-%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAMVVM][https_gitee.com_monkeyhlj_vue-learning_tree_master_20210812-_E6_89_8B_E5_86_99_E4_B8_80_E4_B8_AAMVVM]

### 虚拟dom ###

#### 什么是dom? ####

*  `<div>xxx</div>`  
    操作dom工具，jq，原生js  
    频繁操作dom性能很差 – 数据量大时  
    改善：先记着dom更新，定时批量修改，通过算法判断哪些需要修改
 *  虚拟dom (`js对象`)

var node={ 
    	tag:"div:,
    	//text:"xxx",
    	children:[
    		{ 
    			tag:"span",
    			//text:"yyy",
    			children:[
    				{ 
    					tag:'#text',
    					text:"yyy"
    				}
    			]
    		}
    	]
    }
    
    <div><span>yyy</span></div>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue源码分析demo</title>
        
        <meta name="viewport" content="width=device-width,initial-scale=1" />
    </head>
    <body>
        <div id="app"></div>
    	<script> function VNode(tag,child,text){ this.tag=tag; this.child=child; this.text=text; } //将虚拟dom转真实dom VNode.prototype.render = function(){ if(this.tag === '#text'){ //文本 return document.createTextNode(this.text); } //元素 let el = document.createElement(this.tag); //<div><span></span></div> this.child.forEach(vnode => { el.appendChild(vnode.render()) //添加生成的dom 递归 }) return el; } //创建虚拟dom function Element(tag,child,text){ if (typeof child === 'string'){ text = child; child = []; } return new VNode(tag,child,text); } //根据虚拟dom生成真实dom let vnodes = Element('div',[Element('#text','aaa')]); let res = vnodes.render(); console.log(res); document.querySelector("#app").innerHTML = res; </script>
    </body>
    </html>

### DIFF算法 ###

*  将虚拟dom映射到真实dom
 *  同级比较
 *  有2对指针，旧首，旧尾，新首，新尾（见下下图）  
    1、从左到右比较  
    将旧首的元素与新首的元素进行比较，若相同则向右移动一位  
    若新元素有多的则直接添加到旧元素上  
    2、从右到左比较  
    3、从旧首与新尾节点比较  
    4、从新首与旧尾节点比较  
    5、从旧首—旧尾区间查找有没有相同的节点，有则复用，无则创建  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20220829/4ab3384d4e6a464095d23b89bf4c47f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/851046b171dc4a20af49d4a32867ea99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/1c7fafa412d04fe782c356075029a873.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/d38d1d57a7074ed4a6bbc5cc3279e187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/7d21e64fc51843518eab3ce93c079876.png
[https_www.jianshu.com_p_b87e6b689a3a]: https://www.jianshu.com/p/b87e6b689a3a
[https_gitee.com_monkeyhlj_vue-learning_tree_master_20210812-_E6_89_8B_E5_86_99_E4_B8_80_E4_B8_AAMVVM]: https://gitee.com/monkeyhlj/vue-learning/tree/master/20210812-%E6%89%8B%E5%86%99%E4%B8%80%E4%B8%AAMVVM
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/19aab949045643b3b196933da80ca4a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/0a66cf2f1aa7407f9edb34149bb8e2c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/8843d142bb0145758d68e621a61382e5.png