兴许你我素未谋面，但很可能相见恨晚，我是前端胖头鱼
前言
都说往年是最惨工作年，大厂裁员，小厂跟风，简历投了几百封回信的寥寥无几，金三银四怕是成了铜三铁四，熙熙攘攘，凄凄惨惨。
然而明天的配角，小帅同学却在戗风环境中给了面试官当头一喝，秀了他一身，优良如他，到底经验了一场怎么的面试？
文中的例子和代码都能够点击这里查看
1.# 题目亮相
面试官： 我看你简历写的精通Vue3，并钻研过其源码? 小伙子很狂啊！那咱就现场秀一段如何？
说罢，面试官现场给了一道题...
<div id="app"></div><script> const $app = document.querySelector('#app') let state = { text: 'hello fatfish' } function effect() { $app.innerText = state.text } effect() setTimeout(() => { // 1秒后心愿app的内容变成hello Vue3 state.text = 'hello Vue3' }, 1000)</script>小帅窃喜： 这个简略，只有拦挡state对象，在对text进行取值时，收集effect函数依赖，而后text设置值时，把收集的effect函数执行一波就能够。
面试官： 口嗨我也会，别逼逼了，连忙写起来...
2 版本1：跑起来了，却不通用，卒
2.1# 源码实现
小帅很快就写出了第一版，外围只有两步：
- 第一步：收集依赖(
effect函数)，在读取key时，将effect函数存储起来 - 第二步：设置值时，将依赖(
effect函数)执行
const $app = document.querySelector('#app')const bucket = new Set() const state = new Proxy({ text: 'hello fatfish' }, { get (target, key) { const value = target[ key ] // 第一步：收集依赖，在读取key时，将effect函数存储起来 bucket.add(effect) console.log(`get ${key}: ${value}`) return value }, set (target, key, newValue) { console.log(`set ${key}: ${newValue}`) target[ key ] = newValue // 第二步：设置值时，将依赖执行 bucket.forEach((fn) => fn()) }})function effect() { console.log('执行了effect') $app.innerText = state.text}effect()setTimeout(() => { state.text = 'hello Vue3'}, 1000)成果预览
点击预览，哒哒哒，看起来很简略哦，霎时就实现啦！
2.2# 面试官点评
面试官： 性能是实现了，然而我不太称心，你这里收集依赖是写死的函数名字effect，只有略微变动一下题目，就不行了。
<div id="container"> <div id="app1"></div> <div id="app2"></div></div>const $app1 = document.querySelector('#app1')const $app2 = document.querySelector('#app2')const state = { text: 'hello fatfish', text2: 'hello fatfish2' }// 扭转app1的值function effect1() { console.log('执行了effect') $app1.innerText = state.text}// 扭转app2的值function effect2() { console.log('执行了effect2') $app2.innerText = state.text2}// 1秒钟之后两个div的值要别离扭转setTimeout(() => { state.text = 'hello Vue3' state.text2 = 'hello Vue3-2'}, 1000)3# 版本2: 反对多属性响应式批改和被动注册
3.1# 源码实现
小帅心想： "粗心了，我应该把effect依赖函数通过某种机制，被动注册到桶中，这样无论你是匿名函数亦或者是具名函数都厚此薄彼"
伶俐的他马上就想到了答案。
const bucket = new Set()let activeEffect// 变动点：// 通过effect函数来被动收集依赖const effect = function (fn) { // 每执行一次，将以后fn赋值给activeEffect,这样在fn中触发读取操作时，就能够被收集进bucket中了 activeEffect = fn // 被动执行一次很重要，必不可少 fn()}const state = new Proxy({ text: 'hello fatfish', text2: 'hello fatfish2' }, { get (target, key) { const value = target[ key ] // 变动点：由版本1的effect变成了activeEffect,从而不再依赖具体的函数名字 bucket.add(activeEffect) console.log(`get ${key}: ${value}`) return value }, set (target, key, newValue) { console.log(`set ${key}: ${newValue}`) target[ key ] = newValue bucket.forEach((fn) => fn()) }})effect(function effect1 () { console.log('执行了effect1') $app1.innerText = state.text})effect(function effect2() { console.log('执行了effect2') $app2.innerText = state.text2})setTimeout(() => { state.text = 'hello Vue3' state.text2 = 'hello Vue3-2'}, 1000)成果预览
能够看到，此时app1和app2在1秒后都变成了对应值，指标达成。
点击查看
3.2# 面试官点评
面试官：小伙子十分不错，思路灵便，变通很快嘛！不过你有没有想过一个问题？
给state上减少一个之前不存在的属性，你的bucket却会把收集的依赖执行一次，是不是有点节约？
是否做到effect中依赖了state的什么值，其值扭转了回调才会被执行?
4# 版本3：推倒重来，再次设计"桶"数据结构
4.1# 从新设计数据结构
小帅： 心里有点没底了，简历上写精通Vue，深入研究过Vue源码真TM巨坑啊！
面试还得持续，苦思冥想之后终于明确了第二个版本的问题所在：
没有在effect函数与被操作的指标字段之间建设明确的分割：
const state = new Proxy({ text: 'hello fatfish' }, { get (target, key) { const value = target[ key ] // 无论`state`上啥属性被读取了，都会执行`get`而后被收集进`bucket` bucket.add(effect) return value }, set (target, key, newValue) { target[ key ] = newValue // 无论`state`上啥值被批改了，都会触发`set`，进而收集的依赖被执行。 bucket.forEach((fn) => fn()) }})1. 新的映射关系
该如何设计bucket中存储的值呢？咱们先来看看要害代码
effect(function effectFn () { $app.innerText = state.text})这段代码中有几个角色：
- 被操作（读取）的代理对象
state - 被操作的（读取）的字段名text
- 应用
effect函数注册的effectFn函数
那么他们之间的关系能够用一颗树来表述
state |__key |__effectFn2. 场景1：有两个effectFn读取同一个对象的属性值
effect(function effectFn1 () { // 读取text state.text})effect(function effectFn2 () { // 读取text state.text})那么依照下面树形构造，当初示意如下：text属性应该要和effectFn1、effectFn2建立联系
state |__text |__effectFn1 |__effectFn23. 场景2：effectFn中读取了同一个对象的多个不同属性
effect(function effectFn1 () { // 读取text1和text2 state.text state.text2})text和text2属性应该要和effectFn1建立联系
state |__text |__effectFn1 |__text2 |__effectFn1 4. 场景3：不同的effectFn中读取了不同对象的不同属性
effect(function effectFn1 () { // 读取text1 state1.text1 }) effect(function effectFn2 () { // 读取text2 state2.text2 }) 对应的关系示意如下：
state1 |__text1 |__effectFn1state2 |__text2 |__effectFn2看到这里，置信聪慧的你肯定明确了，当咱们扭转了state2.text2的值时，只有effectFn2函数会被从新执行，而effectFn1却不会。当然了新增一个以往不存在的属性时，effectFn1和effectFn2都不会被执行。
5. 画一个数据结构图来了解一下存储关系：
4.2# 源码实现
6: 新版源码实现
const $app = document.querySelector('#app')// 从新定义bucket数据类型为WeakMapconst bucket = new WeakMap()let activeEffectconst effect = function (fn) { activeEffect = fn fn()}const state = new Proxy({ name: 'fatfish', age: 100 }, { get (target, key) { const value = target[ key ] // activeEffect无值意味着没有执行effect函数，无奈收集依赖，间接return掉 if (!activeEffect) { return } // 每个target在bucket中都是一个Map类型： key => effects let depsMap = bucket.get(target) // 第一次拦挡，depsMap不存在，先创立分割 if (!depsMap) { bucket.set(target, (depsMap = new Map())) } // 依据以后读取的key，尝试读取key的effects函数 let deps = depsMap.get(key) if (!deps) { // deps实质是个Set构造，即一个key能够存在多个effect函数，被多个effect所依赖 depsMap.set(key, (deps = new Set())) } // 将激活的effectFn存进桶中 deps.add(activeEffect) console.log(`get ${key}: ${value}`) return value }, set (target, key, newValue) { console.log(`set ${key}: ${newValue}`) // 设置属性值 target[ key ] = newValue // 读取depsMap 其构造是 key => effects const depsMap = bucket.get(target) if (!depsMap) { return } // 真正读取依赖以后属性值key的effects const effects = depsMap.get(key) // 挨个执行即可 effects && effects.forEach((fn) => fn()) }})effect(() => { console.log('执行了effect') $app.innerText = `hello ${ state.name }, are you ${state.age} years old?`})setTimeout(() => { state.name = 'Vue3' state.age = 18}, 1000)成果预览
点击查看
能够看到咱们给state新增了一个属性text然而effect并不会被执行，批改了name属性为juejin之后才被执行了，而视图层也更新了。
4.3# 面试官点评
牛逼，牛逼，差点给我整懵逼，小弟拜服！
不过能不能再进一步，你这只能对state一个对象进行响应式解决，能不能再封装一下，像Vue3外面应用reactive一样应用？
5# 版本4：reactive形象，有点Vue3的滋味了
5.1# 源码实现
小帅心想：你肯定是不想让我面试通过，成心刁难我，不过你是面试官你最大。搞就搞。
后面咱们曾经实现了根本的响应式性能，不过为了通用化，咱们能够进一步封装。
const bucket = new WeakMap()// 从新定义bucket数据类型为WeakMaplet activeEffectconst effect = function (fn) { activeEffect = fn fn()}// track示意追踪的意思function track (target, key) { // activeEffect无值意味着没有执行effect函数，无奈收集依赖，间接return掉 if (!activeEffect) { return } // 每个target在bucket中都是一个Map类型： key => effects let depsMap = bucket.get(target) // 第一次拦挡，depsMap不存在，先创立分割 if (!depsMap) { bucket.set(target, (depsMap = new Map())) } // 依据以后读取的key，尝试读取key的effects函数 let deps = depsMap.get(key) if (!deps) { // deps实质是个Set构造，即一个key能够存在多个effect函数，被多个effect所依赖 depsMap.set(key, (deps = new Set())) } // 将激活的effectFn存进桶中 deps.add(activeEffect)}// trigger执行依赖function trigger (target, key) { // 读取depsMap 其构造是 key => effects const depsMap = bucket.get(target) if (!depsMap) { return } // 真正读取依赖以后属性值key的effects const effects = depsMap.get(key) // 挨个执行即可 effects && effects.forEach((fn) => fn())}// 对立对外裸露响应式函数function reactive (state) { return new Proxy(state, { get (target, key) { const value = target[ key ] track(target, key) console.log(`get ${key}: ${value}`) return value }, set (target, key, newValue) { console.log(`set ${key}: ${newValue}`) // 设置属性值 target[ key ] = newValue trigger(target, key) } })}有了下面的封装咱们应用起来就真的有点Vue3的感觉啦！
const $app = document.querySelector('#app')const nameObj = reactive({ name: 'fatfish'})const ageObj = reactive({ age: 100})effect(() => { console.log('执行了effect') $app.innerText = `hello ${ nameObj.name }, are you ${ageObj.age} years old?`})setTimeout(() => { nameObj.name = 'Vue3'}, 1000)setTimeout(() => { ageObj.age = 18}, 2000)成果预览
点击预览
能够看到咱们通过reactive定义了两个响应式数据，在1秒后批改了nameObj的值，视图也马上更新了，2秒后批改了ageObj的值，视图也马上更新了。这下够通用了吧！完满
5.2# 面试官点评
面试官： 你特地优良，不过...
小帅：不过你妹啊！ 我就面个试，你要我造个Vue3不成？
面试官： 好好好，哈哈哈！这轮面试通过了，接下来二面面试官会持续让你实现更全面的响应式零碎，好好筹备把!
小帅: 心里一万个草泥马飞过...
6.# 下集预报
尽管小帅曾经失去了一面面试官的认可，然而就目前实现的响应式零碎来说还是不够欠缺，问题仍旧不少比方：
- effect嵌套执行会有啥问题？
- 会不会呈现循环依赖，死循环等问题？
- ...
这些问题请看小帅在二面如何解决，敬请期待。
最初
心愿能始终给大家分享实用、根底、进阶的知识点，一起早早上班，高兴摸鱼。
期待你在掘金关注我：前端胖头鱼，也能够在公众号里找到我：前端胖头鱼。
参考
Vue.js设计与实现