深入浅出 - vue变化侦测原理

废话真多!!!

其实在一年前我已经写过一篇关于 vue响应式原理的文章，但是最近我翻开看看发现讲的内容和我现在心里想的有些不太一样，所以我打算重新写一篇更通俗易懂的文章。

我的目标是能让读者读完我写的文章能学到知识，有一部分文章标题都以深入浅出开头，目的是把一个复杂的东西排除掉干扰学习的因素后剩下的核心原理通过很简单的描述来让读者学习到知识。

关于vue的内部原理其实有很多个重要的部分，变化侦测，模板编译，virtualDOM，整体运行流程等。

今天主要把变化侦测这部分单独拿出来讲一讲。

如何侦测变化？

关于变化侦测首先要问一个问题，在 js 中，如何侦测一个对象的变化，其实这个问题还是比较简单的，学过js的都能知道，js中有两种方法可以侦测到变化，Object.defineProperty 和 ES6 的proxy。

到目前为止vue还是用的 Object.defineProperty，所以我们拿 Object.defineProperty来举例子说明这个原理。

这里我想说的是，不管以后vue是否会用 proxy 重写这部分，我讲的是原理，并不是api，所以不论以后vue会怎样改，这个原理是不会变的，哪怕vue用了其他完全不同的原理实现了变化侦测，但是本篇文章讲的原理一样可以实现变化侦测，原理这个东西是不会过时的。

之前我写文章有一个毛病就是喜欢对着源码翻译，结果过了半年一年人家源码改了，我写的文章就一毛钱都不值了，而且对着源码翻译还有一个缺点是对读者的要求有点偏高，读者如果没看过源码或者看的和我不是一个版本，那根本就不知道我在说什么。

好了不说废话了，继续讲刚才的内容。

知道 Object.defineProperty 可以侦测到对象的变化，那么我们瞬间可以写出这样的代码：

functiondefineReactive( data, key, val) { Object. defineProperty(data, key, { enumerable :true, configurable :true, get:function() { returnval }, set:function( newVal) { if(val ===newVal){ return} val =newVal } })}

写一个函数封装一下 Object.defineProperty，毕竟 Object.defineProperty 的用法这么复杂，封装一下我只需要传递一个 data，和 key，val 就行了。

现在封装好了之后每当 data 的 key 读取数据 get 这个函数可以被触发，设置数据的时候 set 这个函数可以被触发，但是，，，，，，，，，，，，，，，，，，发现好像并没什么鸟用？

怎么观察？

现在我要问第二个问题，“怎么观察？”

思考一下，我们之所以要观察一个数据，目的是为了当数据的属性发生变化时，可以通知那些使用了这个 key 的地方。

举个