记得初学Vue源码的时候，在defineReactive、Observer、Dep、Watcher等等内部设计源码之间跳来跳去，发现再也绕不出来了。Vue发展了很久，很多fix和feature的增加让内部源码越来越庞大，太多的边界情况和优化设计掩盖了原本精简的代码设计，让新手阅读源码变得越来越困难，但是面试的时候，Vue的响应式原理几乎成了Vue技术栈的公司面试中高级前端必问的点之一。
这篇文章通过自己实现一个响应式系统，尽量还原和Vue内部源码同样结构，但是剔除掉和渲染、优化等等相关的代码，来最低成本的学习Vue的响应式原理。
预览
源码地址(ts)：
https://github.com/sl1673495/vue-reactive
源码地址(js)
https://github.com/sl1673495/vue-reactive/tree/js-version
预览地址：
https://sl1673495.github.io/vue-reactive/
reactive
Vue最常用的就是响应式的data了，通过在vue中定义
new Vue({ data() { return { msg: 'Hello World' } } })
在data发生改变的时候，视图也会更新，在这篇文章里我把对data部分的处理单独提取成一个api：reactive，下面来一起实现这个api。
要实现的效果：
const data = reactive({ msg: 'Hello World', }) new Watcher(() => { document.getElementById('app').innerHTML = `msg is ${data.msg}` })
在data.msg发生改变的时候，我们需要这个app节点的innerHTML同步更新，这里新增加了一个概念Watcher，这也是Vue源码内部的一个设计，想要实现响应式的系统，这个Watcher是必不可缺的。
在实现这两个api之前，我们先来理清他们之间的关系，reactive这个api定义了一个响应式的数据，其实大家都知道响应式的数据就是在它的某个属性（比如例中的data.msg）被读取的时候，记录下来这时候是谁在读取他，读取他的这个函数肯定依赖它。
在本例中，下面这段函数，因为读取了data.msg并且展示在页面上，所以可以说这段渲染函数依赖了data.msg。
// 渲染函数 document.getElementById('app').innerHTML = `msg is ${data.msg}`
这也就解释清了，为什么我们需要用new Watcher来传入这段渲染函数，我们已经可以分析出来Watcher是帮我们记录下来这段渲染函数依赖的关键。
在js引擎执行渲染函数的途中，突然读到了data.msg，data已经被定义成了响应式数据，读取data.msg时所触发的get函数已经被我们劫持，这个get函数中我们去记录下data.msg被这个渲染函数所依赖，然后再返回data.msg的值。
这样下次data.msg发生变化的时候，Watcher内部所做的一些逻辑就会通知到渲染函数去重新执行。这不就是响应式的原理嘛。
下面开始实现代码
import Dep from './dep' import { isObject } from '../utils' // 将对象定义为响应式 export default function reactive(data) { if (isObject(data)) { Object.keys(data).forEach(key => { defineReactive(data, key) }) } return data } function defineReactive(data, key) { let val = data[key] // 收集依赖 const dep = new Dep() Object.defineProperty(data, key, { get() { dep.depend() return val }, set(newVal) { val = newVal dep.notify() } }) if (isObject(val)) { reactive(val) } }
代码很简单，就是去遍历data的key，在defineReactive函数中对每个key进行get和set的劫持，Dep是一个新的概念，它主要用来做上面所说的dep.depend()去收集当前正在运行的渲染函数和dep.notify() 触发渲染函数重新执行。
可以把dep看成一个收集依赖的小筐，每当运行渲染函数读取到data的某个key的时候，就把这个渲染函数丢到这个key自己的小筐中，在这个key的值发生改变的时候，去key的筐中找到所有的渲染函数再执行一遍。
Dep
export default class Dep { constructor() { this.deps = new Set() } depend() { if (Dep.target) { this.deps.add(Dep.target) } } notify() { this.deps.forEach(watcher => watcher.update()) } } // 正在运行的watcher Dep.target = null
这个类很简单，利用Set去做存储，在depend的时候把Dep.target加入到deps集合里，在notify的时候遍历deps，触发每个watcher的update。
没错Dep.target这个概念也是Vue中所引入的，它是一个挂在Dep类上的全局变量，js是单线程运行的，所以在渲染函数如：
document.getElementById('app').innerHTML = `msg is ${data.msg}`
运行之前，先把全局的Dep.target设置为存储了这个渲染函数的watcher，也就是：
new Watcher(() => { document.getElementById('app').innerHTML = `msg is ${data.msg}` })
这样在运行途中data.msg就可以通过Dep.target找到当前是哪个渲染函数的watcher正在运行，这样也就可以把自身对应的依赖所收集起来了。
这里划重点：Dep.target一定是一个Watcher的实例。