vue 双向数据绑定原理？

本节目标：理解“vue 双向数据绑定原理？”的核心思路，并能把它用于实际开发或面试表达。

==vue== ==通过使用双向数据绑定，来实现了== ==View== ==和== ==Model== ==的同步更新。====vue== ==的双向数据绑定主要是通过使用数据劫持和发布订阅者模式来实现的。======
==首先我们通过== ==Object.defineProperty()== ==方法来对== ==Model== ==数据各个属性添加访问器属性，以此来实现数据的劫持，因此当== ==Model== ==中的数据发生变化的时候，我们可以通过配置的== ==setter== ==和== ==getter== ==方法来实现对== ==View== ==层数据更新的通知。======
==数据在== ==html== ==模板中一共有两种绑定情况，一种是使用== ==v-model== ==来对== ==value== ==值进行绑定，一种是作为文本绑定，在对模板引擎进行解析的过程中。==
==如果遇到元素节点，并且属性值包含== ==v-model== ==的话，我们就从== ==Model== ==中去获取== ==v-model== ==所对应的属性的值，并赋值给元素的====value====值。然后给这个元素设置一个监听事件，当== ==View== ==中元素的数据发生变化的时候触发该事件，通知== ==Model== ==中的对应的属性的值进行更新。======
==如果遇到了绑定的文本节点，我们使用== ==Model== ==中对应的属性的值来替换这个文本。对于文本节点的更新，我们使用了发布订阅者模式，属性作为一个主题，我们为这个节点设置一个订阅者对象，将这个订阅者对象加入这个属性主题的订阅者列表中。当== ==Model== ==层数据发生改变的时候，====Model== ==作为发布者向主题发出通知，主题收到通知再向它的所有订阅者推送，订阅者收到通知后更改自己的数据。======
==详细资料可以参考：== ==《====Vue.js== ==双向绑定的实现原理》==
**js实现简单的双向绑定**
<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {};
Object.defineProperty(obj, "txt", {
  get: function () {
    return obj;
  },
  set: function (newValue) {
    document.getElementById("txt").value = newValue;
    document.getElementById("show").innerHTML = newValue;
  },
});
document.addEventListener("keyup", function (e) {
  obj.txt = e.target.value;
});
</script>

> 来自

 <https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/JavaScript/JavaScript.md>