Vue 双向数据绑定原理

参考文章：https://www.cnblogs.com/kidney/p/6052935.html

双向数据绑定要实现：view -- model -- model -- view
1.创建一个Vue对象，原型里要做的是接收数据，劫持并编译dom节点，将dom节点重新挂在app
2.接收数据的时候，为每一个数据都用defineProperty添加一个set，get方法
3.view -- model ：在劫持dom节点的时候，如果是有v-model的元素，把Vue中该变量的初始值赋值给该元素value,并添加监听addEventListener，输入数据的时候就赋值给Vue中的该变量
4.model -- view：如果是{{}}节点，该节点值为Vue中该变量的值
5.让数据实时更新，就用到订阅者发布者模式，在4步骤编译获取数据的每个节点都定义一个订阅者，在2步骤defineProperty时为每个数据都添加一个唯一的发布者dep, 在获取数据get中将改数据的订阅者添加到发布者dep里，在set数据改变的时候调用发布者dep通知所有订阅者。
（订阅者发布者模式:为每一个数据添加一个单独的发布者，在get数据的时候添加一个订阅者，在set该数据的时候通过该数据的发布者通知所有该数据的订阅者。）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test vue</title>
</head>

<body>

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

    <script>
       
        var appDep;

        //定义发布者
        function Dep() {
            this.subs = [];
        }
        Dep.prototype = {
            notify: function() {
                this.subs.forEach(function(sub) {
                    sub.update();
                });
            },
            addSub: function(sub) {
                this.subs.push(sub);
            }
        }

        //订阅者
        function Watcher(vm, node, name) {
            appDep = this;
            this.name = name;
            this.node = node;
            this.vm = vm;
            this.update();
            appDep = null;
        }

        Watcher.prototype = {
            update: function() {
                this.get();
                this.node.nodeValue = this.value;
            },
            get: function() {
                this.value = this.vm[this.name];
            }
        }

        //比较返回dom类型
        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;
                        node.addEventListener('input', function(e) {
                            vm[name] = e.target.value;
                        });
                        node.value = vm[name];
                        node.removeAttribute('v-model');
                    }
                }
            }

            //节点类型为text
            if (node.nodeType === 3) {
                if (reg.test(node.nodeValue)) {
                    var name = RegExp.$1; //获取匹配到的字符串
                    name = name.trim();
                    // node.nodeValue = vm[name]; //将值赋值给node节点
                    
                    //在编译dom节点的时候添加订阅者
                    new Watcher(vm, node, name);
                }
            }
        }

        //劫持dom
        function nodeFragment(node, vm) {
            var flag = document.createDocumentFragment();
            var child;
            while (child = node.firstChild) {
                compile(child, vm);
                flag.appendChild(child);
            }
            return flag;
        }

        //对data遍历
        function observe(obj, vm) {
            Object.keys(obj).forEach(function(key) {
                defineReactive(vm, key, obj[key]);
            });
        }

        //添加set get
        function defineReactive(obj, key, value) {
            //每个属性都添加一个发布者
            var dep = new Dep();
            Object.defineProperty(obj, key, {
                get: function() {
                    //获取数据的时候将订阅者添加到对应的发布者
                    if (appDep) dep.addSub(appDep);
                    return value;
                },
                set: function(newValue) {
                    if (newValue === value) return;
                    value = newValue;
                    // 发布者发布通知
                    dep.notify();
                }
            });
        }

        //定义Vue类
        function Vue(option) {
            this.data = option.data;
            var data = this.data;
            observe(data, this);

            var id = option.el;

            var dom = nodeFragment(document.getElementById(id), this);
            //编译完成将dom返回到app中
            document.getElementById(id).appendChild(dom);
        }

        var vm = new Vue({
            el: 'app',
            data: {
                text: 'hello world'
            }
        });
    </script>
</body>

</html>

最后编辑于：2019.01.01 20:51:24