原来vue的原理是这样的

vue.js中有两个核心功能：响应式数据绑定，组件系统。主流的mvc框架都实现了单向数据绑定，而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件，从而动态地修改model和view。
介绍vue原理之前，我们先简单回顾一下什么是mvc。
[阮老师mvc详解链接点这里]

MVC

阮链接

mvc模型

视图（View）：用户界面。
控制器（Controller）：业务逻辑
模型（Model）：数据保存

通信方式

View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

MVP

mvp模型

  1. 各部分之间的通信，都是双向的。

  2. View 与 Model 不发生联系，都通过 Presenter 传递。

  3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM

MVVM模型

可以看到，MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

好了，接下来来介绍本章的重点，vue的原理。

1.vuejs双向绑定

html代码

 <input type="text" id="a">
    <span id="b"></span>

js代码

       var obj = {};
        Object.defineProperty(obj, 'hello', {
            set: function (newVal) {
              document.getElementById('a').value = newVal;
              document.getElementById('b').innerHTML = newVal;
            }
        })
        document.addEventListener('keyup', function (e) {
          obj.hello = e.target.value;
        });

效果1：


效果1

这个效果就是在文本框中输入的值会显示在旁边的<span>标签里。这个例子就是双向绑定的实现，但是仅仅为了说明原理，这个和我们平时用的vue.js还有差距，下面是我们常见的vue.js写法

html代码

    {{ text }}

js代码

    el: 'app',
    data: {
      text: 'hello world'
    }
  })

为了实现这样的容易理解的代码vue.js背后做了很多工作，我们一一分解。

  1. 输入框以及文本节点与data中的数据绑定
  2. 输入框变化的时候，data中的数据同步变化。即MVVM中 view => viewmodel的变化
  3. data中的数据变化时，文本节点的内容同步变化。即MVVM中viewmode => view的变化

2 数据初始化绑定

介绍数据初始化绑定之前先说一下DocumentFragment。DocumentFragment（文档片段）可以看做是节点容器，它可以包含多个子节点，可以把它插入到DOM中，只有它的子节点会插入目标节点，所以可以把它看做是一组节点容器。使用DocumentFragment处理节点速度和性能优于直接操作DOM。Vue进行编译的时候就是将挂载目标的所有子节点劫持到DocumentFragment中，经过处理后再将DocumentFragment整体返回到挂载目标。实例代码如下：

 var dom = nodeToFragment(document.getElementById("app"));
        console.log(dom);
        function nodeToFragment (node, vm) {
            var flag = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                flag.appendChild(child); // 劫持node的所有节点
            }
            return flag;
        }
        document.getElementById("app").appendChild(dom);

有了文档片段之后再看看初始化绑定。

html代码：

    <input type="text" v-model="text">
    {{text}}
</div>

js代码

function compile (node, vm) {
        var reg = /\{\{(.*)\}\}/;
        // 节点类型为元素
        if (node.nodeType === 1) {
            var attr = node.attributes;
            // 解析属性
            for (var i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    var name = attr[i].nodeValue; // 获取v-model绑定的属性名
                    node.value = vm.data[name]; // 将data的值赋给该node
                    node.removeAttribute('v-model');
                }
            }
        }
        // 节点类型为text
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1; // 获取匹配到的字符串
                name = name.trim()
                node.nodeValue = vm.data[name]; // 将该data的值付给该node
            }
        }
    }

    function nodeToFragment (node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            compile(child, vm);
            // 将子节点劫持到文档片段中
            flag.appendChild(child);
        }
        return flag;
    }

    // 构造函数
    function Vue (options) {
        this.data = options.data;
        var id = options.el;
        var dom = nodeToFragment(document.getElementById(id), this);
        // 编译完成后把dom返回到app中
        document.getElementById(id).appendChild(dom);
    }

    var vm = new Vue({
        el: 'app',
        data: {
            text: 'hello world'
        }
    });
效果2

我们看到hello word已经绑定到input标签和节点中了

先看compile方法，这个方法主要负责给node节点赋值

  1. compile方法接收两个参数，第一个是DOM节点，第二个vm是当前对象
  2. 判断dom节点类型，如果是1，表示元素（这里判断不太严谨，只是为了说明原理），在node节点的所有属性中查找nodeName为“v-model”的属性，找到属性值，这里是“text”。用当前对象中名字为“text”的属性值给节点赋值，最后删除这个属性，就是删除节点的v-model属性。
  3. 判断dom节点类型，如果是3，表示是节点内容，用正则表达式判断是“{{text}}”这样的字符串，用当前对象中名字为“text”的属性值给节点赋值，直接覆盖掉“{{text}}”

nodeToFragment方法负责创建文档片段，并将compile处理过的子节点劫持到这个文档片段中

  1. 创建一个文档片段
  2. 循环查找传入的node节点，调用compile方法给节点赋值
  3. 将赋值后的节点劫持到文档片段中

Vue构造函数

  1. 用传入参数的data属性给当前对象的data属性赋值
  2. 用传入参数的id标记查找挂载节点，调用nodeToFragment方法获取劫持后的文档片段，这个过程称为编译
  3. 编译完成后，将文档片段插入到指定的当前节点中

实例化vue

  1. 实例化一个vue对象，el属性为挂载节点的id，data属性为要绑定的属性及属性值

响应式数据绑定

初始化绑定只是实现了第一步，然后我们要实现的是在文本框中输入内容的时候，vue实例中的属性值也跟着变化。思路是在文本框中输入数据的时候，触发文本框的input事件（也可以是keyup，change），在相应的事件处理程序中，获取输入内容赋值给当前vue实例vm的text属性。这里利用上面介绍的Object.defeinProperty()方法来给vue实例中data中的属性重新定义为访问器属性，就是在定义这个属性的时候添加get，set这两个存取描述符，这样给vm.text赋值的时候就会触发set方法。然后在set方法中更新vue实例属性的值。看下面的html，js代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式数据绑定</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="text"/>
    {{ text }}
</div>
<script>
    /**
     * 使用defineProperty将data中的text设置为vm的访问器属性
     * @param obj 对象
     * @param 属性名
     * @param 属性值
     * */
    function defineReactive (obj, key, val) {
        Object.defineProperty(obj, key, {
            get: function () {
                return val
            },
            set: function (newVal) {
                if (newVal === val) {
                    return
                }
                val = newVal
                // 输出日志
                console.log(`set方法触发属性值变化${val}`)
            }
        })
    }
    /**
     * 给vue实例定义访问器属性
     * @param obj vue实例中的数据
     * @param vm vue对象
     * */
    function observe (obj, vm) {
        Object.keys(obj).forEach(function (key) {
            defineReactive(vm, key, obj[key]);
        })
    }
    /**
     * 编译过程，给子节点初始化绑定vue实例中的属性值
     * @param node 子节点
     * @param vm vue实例
     * */
    function compile (node, vm) {
        let reg = /\{\{(.*)\}\}/
        // 节点类型为元素
        if (node.nodeType === 1) {
            let attr = node.attributes
            // 解析属性
            for (let i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    // 获取v-model绑定的属性名
                    let name = attr[i].nodeValue
                    // 添加监听事件
                    node.addEventListener('input', function (e) {
                        // 给相应的data属性赋值，进而触发该属性的set方法
                        vm[name] = e.target.value;
                    });
                    // 将data的值赋给该node
                    node.value = vm.data[name];
                    node.removeAttribute('v-model')
                }
            }
        }
        // 节点类型为text
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                // 获取匹配到的字符串
                let name = RegExp.$1
                name = name.trim()
                // 将data的值赋给该node
                node.nodeValue = vm.data[name]
            }
        }
    }
    /**
     * DocumentFragment文档片段，可以看作节点容器，它可以包含多个子节点，当将它插入到dom中时只有子节点插入到目标节点中。
     * 使用documentfragment处理节点速度和性能要高于直接操作dom。vue编译的时候，就是将挂载目标的所有子节点劫持到documentfragment
     * 中，经过处理后再将documentfragment整体返回到挂载目标中。
     * @param node 节点
     * @param vm vue实例
     * */
    function nodeToFragment (node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            compile(child, vm);
            flag.appendChild(child);
        }
        return flag;
    }
    /*vue类*/
    function Vue (options) {
        this.data = options.data
        let data = this.data
        // 给vue实例的data定义访问器属性，覆盖原来的同名属性
        observe(data, this)
        let id = options.el
        let dom = nodeToFragment(document.getElementById(id), this)
        // 编译，劫持完成后将dom返回到app中
        document.getElementById(id).appendChild(dom)
    }

    /*定义一个vue实例*/
    let vm = new Vue({
        el: 'app',
        // 这里的data属性不是访问器属性
        data: {
            text: 'hello world!'
        }
    })
</script>
</body>
</html>
效果3

下面不再逐句分析，只说重点的。

  1. 在defineReactive方法中，vue实例中的data的属性重新定义为访问器属性，并在set方法中将新的值更新到这个属性上
  2. 在observe方法中，遍历vue实例中data的属性，逐一调用defineReactive方法，把他们定义为访问器属性
  3. 在compile方法中，如果是input这样的标签，给它添加事件（也可以是keyup，change），监听input值变化，并给vue实例中相应的访问器属性赋值
  4. 在Vue类方法中，调用observer方法，传入当前实例对象和对象的data属性，将data属性中的子元素重新定义为当前对象的访问器属性

set方法被触发之后，vue实例的text属性跟着变化，但是<span>的内容并没有变化，下面的内容将会介绍“订阅/发布模式”来解决这个问题。

4 双向绑定的实现

在实现双向绑定之前要先学习一下“订阅/发布模式”。订阅发布模式（又称为观察者模式）定义一种一对多的关系，让多个观察者同时监听一个主题对象，主题对象状态发生改变的时候通知所有的观察者。

发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作

看下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订阅/发布模式</title>
</head>
<body>
<script>
    /**
     * 定义一个发布者publisher
     * */
    var pub = {
        publish: function () {
            dep.notify();
        }
    }
    /**
     * 三个订阅者
     * */
    var sub1 = {
        update: function () {
            console.log(1);
        }
    };
    var sub2 = {
        update: function () {
            console.log(2);
        }
    };
    var sub3 = {
        update: function () {
            console.log(3);
        }
    }
    /**
     * 一个主题对象
     * */
    function Dep () {
        this.subs = [sub1, sub2, sub3];
    }
    Dep.prototype.notify = function () {
        this.subs.forEach(function (sub) {
            sub.update();
        })
    }
    // 发布者发布消息，主题对象执行notifiy方法，触发所有订阅者响应，执行update
    var dep = new Dep();
    pub.publish();
</script>
</body>
</html>
效果4
  1. 定义发布者对象pub，对象中定义publish方法，方法调用主题对象实例dep的notify()方法
  2. 定义三个订阅者对象，对象中定义update方法，三个对象的update方法分别输出1，2，3
  3. 定义一个主题方法类，主题对象中定义数组属性subs，包含三个订阅者对象
  4. 在主题方法类的原型对象上定义通知方法notify，方法中循环调用三个订阅者对象的update()方法
  5. 实例化主题方法类得到实例dep
  6. 调用发布者对象的通知方法notifiy()，分别输出1，2，3

每当创建一个Vue实例的时候，主要做了两件事情，第一是监听数据：observe(data)，第二个是编译HTML：nodeToFragment(id)。
在监听数据过程中，为data的每一个属性生成主题对象dep。
在编译HTML的过程中，为每个与数据绑定相关的节点生成一个订阅者watcher，watcher会将自己添加到相应属性的dep中。
前面已经实现了：修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性set方法。
接下来我们要实现的是：发出通知dep.notify() => 触发订阅者的updata方法 => 更新视图，实现这个目标的关键是如何将watcher添加到关联属性的dep中去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定的实现</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="text">
    {{ text }}
</div>
<script>
    /**
     * 使用defineProperty将data中的text设置为vm的访问器属性
     * @param obj 对象
     * @param key 属性名
     * @param val 属性值
     */
    function defineReactive (obj, key, val) {
        var dep = new Dep();
        Object.defineProperty(obj, key, {
            get: function () {
                //  如果主题对象类的静态属性target有值， 此时Watcher方法被调用，给主题对象添加订阅者
                if (Dep.target) dep.addSub(Dep.target);
                return val;
            },
            set: function (newVal) {
                if (newVal === val) return
                val = newVal;
                // 主题对象作为发布者收到通知推送给订阅者
                dep.notify();
            }
        })
    }
    /**
     * 给vue实例定义访问器属性
     * @param obj vue实例中的数据
     * @param vm vue对象
     */
    function observe (obj, vm) {
        Object.keys(obj).forEach(function (key) {
            defineReactive(vm, key, obj[key])
        })
    }
    /**
     * DocumentFragment文档片段，可以看作节点容器，它可以包含多个子节点，当将它插入到dom中时只有子节点插入到目标节点中。
     * 使用documentfragment处理节点速度和性能要高于直接操作dom。vue编译的时候，就是将挂载目标的所有子节点劫持到documentfragment
     * 中，经过处理后再将documentfragment整体返回到挂载目标中。
     * @param node 节点
     * @param vm vue实例
     * */
    function nodeToFragment (node, vm) {
        var flag = document.createDocumentFragment();
        var child;
        while (child = node.firstChild) {
            compile(child, vm);
            flag.appendChild(child);
        }
        return flag;
    }

    /**
     * 给子节点初始化绑定vue实例中的属性值
     * @param node 子节点
     * @param vm vue实例
     */
    function compile (node, vm) {
        var reg = /\{\{(.*)\}\}/;
        // 节点类型为元素
        if (node.nodeType === 1) {
            var attr = node.attributes;
            // 解析属性
            for (var i = 0; i < attr.length; i++) {
                if (attr[i].nodeName === 'v-model') {
                    // 获取v-model绑定的属性名
                    var name = attr[i].nodeValue;
                    node.addEventListener('input', function (e) {
                        // 给相应的data属性赋值，触发set方法
                        vm[name] = e.target.value
                    });
                    // 将data的值赋给该node
                    node.value = vm[name];
                    node.removeAttribute('v-model');
                }
            }
            new Watcher(vm, node, name, 'input')
        }
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1; // 获取匹配到的字符串
                name = name.trim();
                // 将data的值赋给该node
                new Watcher(vm, node, name, 'text');
            }
        }
    }

    /**
     * 编译 HTML 过程中，为每个与 data 关联的节点生成一个 Watcher
     * @param vm
     * @param node
     * @param name
     * @param nodeType
     * @constructor
     */
    function Watcher (vm, node, name, nodeType) {
        // 将当前对象赋值给全局变量Dep.target
        Dep.target = this;
        this.name = name;
        this.node = node;
        this.vm = vm;
        this.nodeType = nodeType;
        this.update();
        Dep.target = null;
    }
    Watcher.prototype = {
        update: function () {
            this.get();
            if (this.nodeType === 'text') {
                this.node.nodeValue = this.value;
            }
            if (this.nodeType === 'input') {
                this.node.value = this.value;
            }
        },
        get: function () {
            this.value = this.vm[this.name];
        }
    }

    /**
     * 定义一个主题对象
     * @constructor
     */
    function Dep () {
        this.subs = [];
    }

    /**
     * 定义主题对象的添加方法和通知变化方法
     * @type {{addSub: Dep.addSub, notify: Dep.notify}}
     */
    Dep.prototype = {
        addSub: function (sub) {
            this.subs.push(sub);
        },
        notify: function () {
            this.subs.forEach(function (sub) {
                sub.update();
            });
        }
    };

    /**
     * 定义Vue类
     * @param options Vue参数选项
     * @constructor
     */
    function Vue (options) {
        this.data = options.data;
        var data = this.data;
        observe(data, this);
        var id = options.el;
        var dom = nodeToFragment(document.getElementById(id), this);
        // 编译完成后，将dom返回到app中
        document.getElementById(id).appendChild(dom);
    }
    // 定义Vue实例
    var vm = new Vue({
        el: 'app',
        data: {
            text: 'hello world'
        }
    })
</script>
</body>
</html>
效果5

这里不再逐句分析，只把重点说明一下

  1. 定义主题对象Dep，对象中有addSub和notify两个方法，前者负责向当前对象中添加订阅者，后者轮询订阅者，调用订阅者的更新方法update()
  2. 定义观察者对象方法Watcher，在方法中先将自己赋给一个全局变量Dep.target，其实是给主题类Dep定义了一个静态属性target，可以直接使用Dep.target访问这个静态属性。然后给类定义共有属性name（vue实例中的访问器属性名“text”），node（html标签，如<input>，{{text}}），vm（当前vue实例），nodeType（html标签类型），其次执行update方法，进而执行了原型对象上的get方法，get方法中的this.vm[this.name]读取了vm中的访问器属性，从而触发了访问器属性的get方法，get方法中将wathcer添加到对应访问器属性的dep中，同时将属性值赋给临时变量value。再者，获取属性的值（保存在临时变量value中），然后更新视图。最后将Dep.target设为空。因为它是全局变量，也是watcher与dep关联的唯一桥梁，任何时刻都必须保证Dep.target只有一个值。
  3. 在编译方法compile中，劫持子节点的时候，在节点上定义一个观察者对象Watcher
  4. defineReactive方法中，定义访问器属性的时候，在存取描述符get中，如果主题对象类的静态属性target有值， 此时Watcher方法被调用，给主题对象添加订阅者。

data中的数据重新定义为访问器属性，get中将当前数据对应的节点添加到主题对象中，set方法中通知数据对应的节点更新。编译过程将data数据生成数据节点，并生成一个观察者来观察节点变化。

总结

本文介绍了vue.js的简单实现以及相关的知识，包含MVC，MVP，MVVM的原理，对象的访问器属性，html的文档片段（DocumentFragment），观察者模式。vue.js的实现主要介绍数据编译（compile），通过文档片段实现数据劫持挂载，通过观察者模式（订阅发布模式）的实现数据双向绑定等内容。

参考

https://www.cnblogs.com/tylerdonet/p/9893065.html
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335