Vue2 数据双向绑定-一一网

一、双向绑定基本概念

vue 是一个 mvvm 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。数据双向绑定一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定
在 vue 中，如果使用 vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于处理表单，vue 的双向数据绑定用起来就特别舒服了，但即两者并不互斥，在全局性数据流使用单项，方便跟踪，局部性数据流使用双向，简单易操作

二、简单的数据双向绑定实现方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>forvue</title>
</head>
<body>
  <input type="text" id="textInput">
  输入：<span id="textSpan"></span>
  <script>
    var obj = {},
    textInput = document.querySelector('#textInput')
    textSpan = document.querySelector('#textSpan')

    Object.defineProperty(obj, 'text', {
      // 当该属性被赋值的时候触发
      set: function (newValue) { 
        textInput.value = newValue
        textSpan.innerHTML = newValue
      }
    });

    textInput.addEventListener('keyup', function (e) {
        obj.text = e.target.value;
    });

  </script>
</body>
</html>
复制代码

代码解析：使用 Object.defineProperty() 来对 obj 中的 text 属性做劫持，也就是为这个属性添加 set 方法，当该属性被赋值的时候，就会触发 set 方法，来修改 Input 的 value 值以及 span 中的 innerHTML ，这样就可以做到数据发生改变，视图也就发生变化；然后监听 input 的keyup 事件，从而修改对象的属性值，这样就做到了当视图发生变化的时候，数据也会跟着同步变化

三、vue2双向绑定原理

3-1 实现基本流程

vue 中双向绑定是采用数据劫持结合发布者-订阅者模式的方式，首先我们需要为 data 中每个属性用Object.defineProperty() 实现数据劫持，为每个属性分配一个 dep，这个 dep 有一个 subs 属性，是一个数组，专门是用来记录该属性的订阅者的，然后在编译的时候在该属性 dep 的 addSub 方法，给 dep 数组添加订阅者，遇到 v-model 会添加一个订阅者，{{}} 也会添加一个订阅者，v-bind 也会添加一个订阅者，只要用到该属性的指令理论上都会，接着为 input 会添加监听事件，修改值就等于为该属性赋值，则会触发该属性的 set 方法，在 set 方法内通知属性对应的 dep，然后循环调用他所有订阅者的 update 方法更新视图
发布者-订阅者模式又称为观察者模式，让多个观察者同时监听某个主题对象，当主题对象发生变化时，会通知所有的观察者对象，即：发布者发出通知给主题对象 => 主题对象接收到通知后推送给所有订阅者 => 订阅者执行相应的操作。

3-2 代码实现

     <div id="app">
        <input type="text" v-model="text">
        输入的值为：{{text}}
        <div>
            <input type="text" v-model="text">
        </div>
    </div>
    <script>
        var vm = new MVue({
            el: '#app',
            data: {
                text: 'hello world'
            }
        })
    </script>
复制代码

现在的目的就是将上述代码的 input 和 data 中的数据进行绑定，当输入框内容变化时，data中的对应数据同步变化，即 view => model，当data中数据变化时，对应的文本节点内容同步变化即 model => view

在初始化 vue 实例的时候对 data 中每个属性劫持监听，同时进行模板编译，指令解析，最后挂载到相应的 DOM 中

Vue 构造函数


function Vue (options) {
    this.$el = options.el;
    this.$data = options.data;

    // 数据监听
    obverser(this.$data);

    // 模板编译（ 指令解析，事件绑定、初始化数据绑定 ）
    let elem = document.querySelector(this.$el);
    elem.appendChild(nodeToFragment(elem, this))
}
复制代码

Dep 构造函数，主要用来生成 Dep 实例，用来收集所有的订阅者，并提供 notify 方法，用来调用订阅者的 update 方法，从而执行相应的操作。在数据监听的时候，vue 会为 data 中的每个属性都生成一个 dep，在编译模板时，会为每个与数据绑定的节点生成一个 watcher ,就实现了 dep 与 watcher的关联

    function Dep () {
        this.subs = [];
    }
    Dep.prototype = {
        addSub (sub) {
            this.subs.push(sub);
        },
        notify () {
            this.subs.forEach(sub => {
                // 执行订阅者的update方法
                sub.update();
            })
        }
    }
复制代码

订阅者 Watcher，默认组件渲染的时候，会创建一个 watcher，并且赋值给了 Dep.target，当渲染视图的时候，会取 data 中的数据，会走每个属性的 get 方法，然后判断 Dep.target 是否有值，如果有则调用了 dep.depend()，让 dep 记录到该订阅者，并最终将 Dep.target 设置为空

    function Watcher (vm, node, name) {
        // 全局的、唯一
        Dep.target = this;
        this.node = node;
        this.name = name;
        this.vm = vm;
        this.index = index;
        this.update();
        Dep.target = null;
    }

    Watcher.prototype = {
        update () {
            this.get();
            let _name;
            if (this.index === 1) {
                _name = this.name;
            } else {
                _name = this.value;
            }
            if (this.node.nodeName === 'INPUT') {
                // 可以添加TEXTAREA、SELECT等
                this.node.value = this.value;
            } else {
               // this.node.nodeValue = this.value;
               this.node.nodeValue = this.node.nodeValue.replace(new RegExp('\\{?\\{?\\s*(' + _name + ')\\s*\\}?\\}?'), this.value);
            } 
            ++this.index;
        },
        get () {
            this.value = this.vm.$data[this.name]
        }
    }
复制代码

obverser 方法，给 data 中每个属性添加一个 dep 遍历 data 中的所有属性,包括子属性对象的属性

     function obverser (obj) {
        Object.keys(obj).forEach(key => {
            if (obj.hasOwnProperty(key)) {
                if (obj[key].constructor === 'Object') {
                    obverser(obj[key])
                }
                defineReactive(obj, key);
            }
        })
    }
复制代码

在 obverser 方法中调用了 defineReactive ，目的是使用了 Object.definePeoperty() 来监听属性变动，给属性添加 setter 和getter

    function defineReactive (obj, key) {
        var _value= obj[key];
        // new一个主题对象
        var dep = new Dep();
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            set (newVal) {
                if (_value= newVal) {
                    return;
                }
                _value= newVal;
                console.log(value)
                // 作为发布者发出通知给主题对象
                dep.notify();
            },
            get () {
                // 如果订阅者存在，添加到主题对象中
                if (Dep.target) {
                    dep.addSub(Dep.target);
                }
                return _value
            }
        })
    }

复制代码

compile 方法主要做的是模版编译，包括了指令解析，事件绑定、初始化数据绑定

    function compile (node, vm) {
        let reg = /\{\{(.*)\}\}/;
        // 元素节点
        if (node.nodeType === 1) {
            var attrs = node.attributes;
            for (let attr of attrs) {
                if (attr.nodeName === 'v-model') {
                    // 获取v-model指令绑定的data属性
                    var name = attr.nodeValue;
                    // 绑定事件
                    node.addEventListener('input', function(e) {
                        vm.$data[name] = e.target.value;
                    })
             
                    // 初始化数据绑定
                    // node.value = vm.$data[name];
                    new Watcher(vm, node, name);
                    // 移除v-model 属性
                    node.removeAttribute('v-model')

                }
            }
        }
        
            // 文本节点
        if (node.nodeType === 3) {
            if (reg.test(node.nodeValue)) {
                var name = RegExp.$1 && (RegExp.$1.trim());
                // 绑定数据到文本节点中
               //  node.nodeValue = node.nodeValue.replace(new RegExp('\\{\\{\\s*(' + name + ')\\s*\\}\\}'), vm.$data[name]);
               new Watcher(vm, node, name);
            }
        }
    }
复制代码