兴许你我素未谋面,但很可能相见恨晚,我是 前端胖头鱼
前言
都说往年是最惨工作年,大厂裁员,小厂跟风,简历投了几百封回信的寥寥无几,金三银四
怕是成了 铜三铁四
,熙熙攘攘,凄凄惨惨。
然而明天的配角,小帅同学 却在戗风环境中给了面试官当头一喝,秀了他一身,优良如他,到底经验了一场怎么的面试?
文中的例子和代码都能够点击这里查看
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
|__effectFn
2. 场景 1:有两个 effectFn 读取同一个对象的属性值
effect(function effectFn1 () {
// 读取 text
state.text
})
effect(function effectFn2 () {
// 读取 text
state.text
})
那么依照下面树形构造,当初示意如下:
text
属性应该要和 effectFn1
、effectFn2
建立联系
state
|__text
|__effectFn1
|__effectFn2
3. 场景 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
|__effectFn1
state2
|__text2
|__effectFn2
看到这里,置信聪慧的你肯定明确了,当咱们扭转了 state2.text2
的值时,只有 effectFn2
函数会被从新执行,而 effectFn1
却不会。当然了新增一个以往不存在的属性时,effectFn1 和 effectFn2
都不会被执行。
5. 画一个数据结构图来了解一下存储关系:
4.2# 源码实现
6: 新版源码实现
const $app = document.querySelector('#app')
// 从新定义 bucket 数据类型为 WeakMap
const bucket = new WeakMap()
let activeEffect
const 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 数据类型为 WeakMap
let activeEffect
const 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 设计与实现