前言：本系列学习笔记从以下几个点展开
- 什么是双向数据绑定
- 双向数据绑定的好处
- 怎么实现双向数据绑定
- 实现双向数据数据绑定需要哪些知识点
- 数据劫持
- 发布订阅模式
先看看我们要实现的目标是什么，如下动图：
0、什么是双向数据绑定
单向数据绑定：把Model 绑定到View上,当我们用js修改模型 Model 时候，视图View上对应的内容也会改动，这就是 数据动，页面动 。
双向数据绑定：简言之 数据动 页面动，页面动，数据动, 典型的应用就是在做表单时候，输入框的内容改动后，跟该输入框的value 的值改动。
看vue 官网上的这个V-model 的演示案例：
1、双向数据绑定的好处
要说出这个好处的时候，也只有在实际场景中才能对应的显示出来。比如我们需要实时显示数据，我们一边说话，一边实时显示我们说的话的文字内容，等等。这让我想起了去年参加云栖大会，台上的大佬一边说话，下面的字幕实时更新。（当然实现这个技术有很多技术点，我们不讨论这个内容，小编也才疏学浅，搞不懂）
以上的都是废话，我们直接看看怎么实现这个双向数据绑定。
一、实现原理
Vue实现双向数据绑定的原理：数据劫持 + 发布订阅模式（有的也称为观察者模式）
数据劫持的核心技术： Object.defineProperty()
**vue 3.0 已经用的不是这个技术了，采用是 原生的 Proxy，据说速度能够提升100%，截张尤大的ppt，** 2018-11-21 修改本篇笔记
（香菇，刚研究会一点，就立马变了，这就是前端世界）,Proxy 的方式将会在本系列笔记结束后，再记录这个技术点的使用
二、数据劫持的方法 Object.defineProperty()
先上一个参照代码，它长这个样子：
var book = { _year: 2004, edition: 1 }; Object.defineProperty(book, "year", { get: function(){
console.log('访问year了,返回_year') return this._year; }, set: function(newValue){ if (newValue > 2004) { this._year = newValue;
console.log('重新设置_year了，并返回edition') this.edition += newValue - 2004; } } }); book.year = 2005; alert(book.edition); //2
---摘自 JavaScript高级程序设计
Object.defineProperty() 的具体介绍，我们本文不做具体展开，查看我这里的一篇文章，Object.defineProperty。 我们这里先要知道这么一个事情。这个方法要传入三个参数，传入的数据对象data，属性key，描述符对象。其中，描述符（descriptor）对象的属 性必须是：configurable、enumerable、writable 和 value。设置其中的一或多个值，可以修改 对应的特性值。我们需要用的是这访问器属性。当我们在读取访问器属性时，会调用 getter 函数，这个函数负责返回有效的值；在写入访问器属性时，会调用 setter 函数并传入新值，这个函数负责决定如何处理数据。上文代码上的 get 方法，在读取属性时调用的函数，set方法，在写入属性时调用的函数。
三、发布订阅者模式
我画了一个图，来理解这个模式，如下图：
代码解释：
//下面封装一个单例模式，内容是发布订阅模式 let event = { eventList: [], listener: function (key, fn) { if (!this.eventList[key]) { //没有订阅过此类消息，创建一个缓存列表 this.eventList[key] = []; } this.eventList[key].push(fn) }, trigger: function () { let key = Array.prototype.shift.call(arguments); // marry let fns = this.eventList[key]; if (!fns || fns.length == 0) { //没有订阅 则返回 return false; } for (let i = 0, fn; fn = fns[i++];) { fn.apply(this, arguments) // 调用 event.listen 里面的 fn 方法，通过apply将当前执行的对象指向当前的this，arguments 传进 fn 函数 } }, remove: function (key, fn) { // 取消订阅 let fns = this.eventList[key]; if (!fns) { return false; } if(!fn) { fns && (fns.length = 0) } else { for (let l = fns.length-1; l>=0; l--) { let _fn = fns[l]; if( _fn === fn) { fns.splice(l, 1) } } } }, install: function (obj) { for (let i in this) { if (i === 'install') { return false } obj[i] = this[i]; } } } let testMsg = {} event.install(testMsg) // 上面方法 就会将event的方法 浅拷贝给 testMsg, 这样testMsg就有 event的方法和属性 testMsg.listener('rich', fn1 = (name) => { console.log(`${name}知道你有钱了`) }) testMsg.listener('borrowMoney', fn2 = (name) => { console.log(`${name}想问你借钱`) }) // listen方法将事件 放进队列 // testMsg.remove('rich', fn1) // 取消订阅 // trigger方法，处理事件队列的方法，调用listen的函数的里面的回调函数 fn testMsg.trigger('rich', '张三') testMsg.trigger('rich', '张三2') testMsg.trigger('borrowMoney', '李四') testMsg.trigger('borrowMoney', '李四2') // 代码总结： // 订阅的事件具有对应的key // 通过listener方法，将具体的事件队列保存到 eventList ，可以理解为缓存列表也可以是事件队列； // 执行trigger 方法，将事件队列拿出来执行调用 // remove 方法根据对应的key值，删除对应的订阅事件 // 模式总结：封装一个单例event， 执行installEvent方法，将想要event对象拷贝到某个对象中去， // 发布者trigger方法，监听者listen方法 ，trigger 发布一个东西，listen立马知道你要发布的东西
四、实现分解
- 主函数入口
-
function Myvue (options) { this.$options = options this.$el = document.querySelector(options.el); this.$data = options.data; Object.keys(this.$data).forEach(key => { this.$prop = key; }) this.init() } Myvue.prototype.init = function () { // 监听数据变化 observer(this.$data); // 获得值 // let value = this.$data[this.$prop]; // 不经过模板编译直接 通知订阅者更新dom // new Watcher(this,this.$prop,value => { // console.log(`watcher ${this.$prop}的改动，要有动静了`) // this.$el.textContent = value // }) //通知模板编译来执行页面上模板变量替换 new Compile(this) }
-
- 主函数调用
-
<script> const vm = new Myvue({ el: "#app", data: { name: "vue 双向数据绑定test1" } }); </script>
-
- 监听器
- 订阅者
- 模板编译器
未完待续，错误之处，敬请指出,共同进步！
文章参考：
https://www.cnblogs.com/beevesnoodles/p/9844854.html
https://github.com/youngwind/blog/issues/87
https://juejin.im/post/5a9108b6f265da4e7527b1a4
后记：代码只做基本实现，不做代码健壮性处理，一些错误处理已经忽略