Object.keys(this.data).forEach(function(key) { var subs = []; // 在这里放置添加所有订阅者的数组 Object.defineProperty(this.data, key, { // this.data.title enumerable: false, configurable: true, get: function getter () { console.log('访问数据啦啦啦') if (target) { subs.push(target); } return this.data[key]; //返回对应数据的值 }, set: function setter (newVal) { if (newVal === this.data[key]) { return; // 如果数据没有变动，函数结束，不执行下面的代码 } this.data[key] = newVal; //数据重新赋值 subs.forEach(function () { // 通知subs里面的所有的订阅者 }) } }); }
上面的代码为了方便理解都是通过简化的，实际上我们把订阅者写成一个构造函数watcher，在实例化订阅者的时候去访问对应的数据，触发相应的getter，详细的代码可以阅读DMQ的自己动手实现MVVM
3. 模板解析
通过上面的两个步骤我们已经实现一旦数据变动，就会通知对应绑定数据的订阅者，接下来我们来简单介绍一个特殊的订阅者，也就是视图更新函数，几乎每个数据都会添加对应的视图更新函数，所以我们就来简单了解一下视图更新函数。
假如说有下面这一段代码，我们怎么把它解析成对应的html呢？
<input v-model="title"> <h1>{{title}}</h1> <button v-on:click="changeTitle">change title<button>
先简单介绍视图更新函数的用途，
比如解析指令v-model="title",v-on:click="changeTitle",还有把{{title}}替换为对应的数据等。
回到上面那个问题，如何解析模板？我们只要去遍历所有dom节点包括其子节点，
如果节点属性含有v-model，视图更新函数就为把input的value设置为title的值
如果节点为文本节点，视图更新函数就为先用正则表达式取出大括号里面的值'title'，再设置文本节点的值为data['title']
如果节点属性含有v-on:xxxx，视图更新函数就为先用正则获取事件类型为click，然后获取该属性的值为changeTitle，则事件的回调函数为this.methods['changeTitle']，接着用addEventListener监听节点click事件。
我们要知道视图更新函数也是data对应属性的订阅者，如果不知道如何触发视图更新函数，可以把上面的发布-订阅模式再看一遍。
可能有的小伙伴可能还有个疑问，如何实现input节点的值变化后，下面的h1节点的title值也发生变化？在遍历所有节点后，如果节点含有属性v-model，就用addEventListener监听input事件，一旦触发input事件，改变data['title']的值，就会触发title的setter，从而通知所有的订阅者。
监听数组变化
无法监控每个数组元素
如果让我们自己实现监听数组的变化，我们可能会想到用object.defineProperty去遍历数组每个元素并设置setter，但是vue源码里面却不是这样写的，因为对每一个数组元素defineProperty带来代码本身的复杂度增加和代码执行效率的降低。
变异数组方法
既然无法通过defineProperty监控数组的每个元素，我们可以重写数组的方法(push, pop, shift, unshift, splice, sort, reverse)来改变数组。
vue文档中是这样写的：
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
下面是vue早期源码学习系列之二：如何监听一个数组的变化 中的实例代码
const aryMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']; const arrayAugmentations = []; aryMethods.forEach((method)=> { // 这里是原生Array的原型方法 let original = Array.prototype[method]; // 将push, pop等封装好的方法定义在对象arrayAugmentations的属性上 // 注意：是属性而非原型属性 arrayAugmentations[method] = function () { console.log('我被改变啦!'); // 调用对应的原生方法并返回结果 return original.apply(this, arguments); }; }); let list = ['a', 'b', 'c']; // 将我们要监听的数组的原型指针指向上面定义的空数组对象 // 别忘了这个空数组的属性上定义了我们封装好的push等方法 list.__proto__ = arrayAugmentations; list.push('d'); // 我被改变啦！ 4 // 这里的list2没有被重新定义原型指针，所以就正常输出 let list2 = ['a', 'b', 'c']; list2.push('d'); // 4
变异数组方法的缺陷
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength
同时文档中也介绍了如何解决上面这两个问题。
最后