如何一步步将Vue的响应式对象观测机制改写为长尾？

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

在平时开发中，Vue的响应式系统让我们不再去操作DOM，只需关注数据逻辑处理，极大降低了代码的复杂度。而响应式系统也是Vue的核心，开发者有必要了解其实现原理！+ 简版

平时开发中，Vue的响应式系统让我们不再去操作DOM，只需关心数据逻辑的处理，极大地降低了代码的复杂度。而响应式系统也是Vue的核心，作为开发者有必要了解其实现原理！

简易版

以watch为切入点

watch是平时开发中使用率非常高的功能，其目的是观测一个数据，当数据变化时执行我们预先定义的回调。使用方式如下：

{ watch: { obj(val, oldVal) { console.log(val, oldVal); } } }

上面观测了Vue实例的obj属性，当其值发生变化时，打印出新值与旧值。

因此，我们定义一个watch函数：

function watch (data, key, cb) { // do something }

1. watch函数接收3个属性，分别是
2. data: 被观测对象 key: 被观测的属性
3. cb: 数据变化后要执行的回调

Object.defineProperty

既然要在数据变化后再执行回调，所以需要知道数据是什么时候被修改的，这就是Object.defineProperty的作用，其为数据定义了访问器属性。在数据被读取时会触发get，在数据被修改时会触发set。