15 分钟掌握 vue-next 响应式原理

写在前面

最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响应式系统，在之前的版本中，已经有若干篇文章对它的响应式原理和实现进行了介绍，这里就不赘述了。在 vue-next 中，其实现原理和之前还是相同的，即通过观察者模式和数据劫持，只不过对其实现方式进行了改变。

对于解析原理的文章，我个人是比较喜欢那种“小白”风格的文章，即不要摘录特别多的代码，也不要阐述一些很深奥的原理与概念。在我刚接触 react 的时候，还记得有一篇利用 jquery 来介绍 react 的文章，从简入繁，面面俱到，其背后阐述的知识点对我后来学习 react 起到很多的帮助。

因此，这篇文章我也打算按这种风格来写一下利用最近空闲时间阅读 vue-next 响应式模块的源码的一些心得与体会，算是抛砖引玉，同时实现一个极简的响应式系统。

如有错误，还望指正。

预备知识

无论是阅读这篇文章，还是阅读 vue-next 响应式模块的源码，首先有两个知识点是必备的：

• Proxy：es6 中新的代理内建工具类
• Reflect：es6 中新的反射工具类

由于篇幅有限，这里也不详细赘述这两个类的用途与使用方法了，推荐三篇我认为不错的文章，仅供参考：

• ES6 Proxies in Depth
• ES6 Proxy Traps in Depth
• ES6 Reflection in Depth

接口

对于 vue-next 响应式系统的 RFC，可以参考[这里](https://github.com/vuejs/rfcs/blob/advanced-reactivity-api/