Vue中data、computed和watch源码如何简析？

本文共计2610个文字，预计阅读时间需要11分钟。

在阅读并记录初学Vue源码的过程中，我发现defineReactive、Observer、Dep、Watcher等核心组件的设计相当精妙。虽然Vue已经发展多年，经历了很多fix和feature的添加，但其内部源码却愈发庞大和复杂。

导读

记得初学Vue源码的时候，在defineReactive、Observer、Dep、Watcher等等内部设计源码之间跳来跳去，发现再也绕不出来了。Vue发展了很久，很多fix和feature的增加让内部源码越来越庞大，太多的边界情况和优化设计掩盖了原本精简的代码设计，让新手阅读源码变得越来越困难，但是面试的时候，Vue的响应式原理几乎成了Vue技术栈的公司面试中高级前端必问的点之一。

这篇文章通过自己实现一个响应式系统，尽量还原和Vue内部源码同样结构，但是剔除掉和渲染、优化等等相关的代码，来最低成本的学习Vue的响应式原理。