vue中的双向数据绑定原理与常见操作技巧详解

return val;
},
set: function (newVal) {
if (newVal === val) {
return;
} else {
val = newVal;
console.log(val); // 方便看效果
}
}
});
}

function observe (obj, vm) {
Object.keys(obj).forEach(function (key) {
defineReactive(vm, key, obj[key]);
});
}
</script>

</body>
</html>

7. 订阅/发布模式(subscribe & publish)

text属性变化了，set方法触发了，但是文本节点的内容没有变化。如何才能让同样绑定到text的文本节点也同步变化呢？这里有一个知识点：订阅发布模式，订阅发布模式又称为观察者模式，定义一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有的观察者对象。
发布者发出通知 => 主题对象收到通知并推送给订阅者 => 订阅者执行相应的操作

// 一个发布者 publisher，功能就是负责发布消息 - publish
    var pub = {
      publish: function () {
        dep.notify();
      }
    }
    // 多个订阅者 subscribers， 在发布者发布消息之后执行函数
    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();
      });
    }
    // 发布者发布消息， 主题对象执行notify方法，进而触发订阅者执行Update方法
    var dep = new Dep();
    pub.publish();

不难看出，这里的思路还是很简单的： 发布者负责发布消息、 订阅者负责接收接收消息，而最重要的是主题对象，他需要记录所有的订阅这特消息的人，然后负责吧发布的消息通知给哪些订阅了消息的人。

所以，当set方法触发后做的第二件事情就是作为发布者发出通知： “我是属性text，我变了”。 文本节点作为订阅者，在接收到消息之后执行相应的更新动作。

8.双向绑定的实现

回顾一下，每当new一个vue,主要做了两件事情 ，第一监听数据:observe(data),第二是编译HTML， nodeToFragment(id)
在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。
在编译HTML的过程中，会为每一个数据绑定相关的节点生成一个订阅者watcher,watcher会将自己添加到相应属性的dep中。