关于前端:面试官Vue3响应式系统都不会写还敢说精通

4次阅读

共计 7165 个字符，预计需要花费 18 分钟才能阅读完成。

兴许你我素未谋面，但很可能相见恨晚，我是 前端胖头鱼

前言

都说往年是最惨工作年，大厂裁员，小厂跟风，简历投了几百封回信的寥寥无几，金三银四 怕是成了 铜三铁四，熙熙攘攘，凄凄惨惨。

然而明天的配角，小帅同学 却在戗风环境中给了面试官当头一喝，秀了他一身，优良如他，到底经验了一场怎么的面试？

文中的例子和代码都能够点击这里查看

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# 源码实现

小帅很快就写出了第一版，外围只有两步：

  1. 第一步：收集依赖 (effect 函数)，在读取 key 时，将 effect 函数存储起来
  2. 第二步：设置值时，将依赖 (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})

这段代码中有几个角色：

  1. 被操作（读取）的代理对象state
  2. 被操作的（读取）的字段名 text
  3. 应用 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.# 下集预报

尽管 小帅 曾经失去了一面面试官的认可，然而就目前实现的响应式零碎来说还是不够欠缺，问题仍旧不少比方：

  1. effect 嵌套执行会有啥问题？
  2. 会不会呈现循环依赖，死循环等问题？
  3. …

这些问题请看小帅在二面如何解决，敬请期待。

最初

心愿能始终给大家分享实用、根底、进阶的知识点，一起早早上班，高兴摸鱼。

期待你在 掘金 关注我：前端胖头鱼 ，也能够在 公众号 里找到我：前端胖头鱼。

参考

Vue.js 设计与实现

正文完
前端
发表至： 前端
2022-04-25
 0
关于前端:深入理解JavaScript垃圾回收机制
关于前端:监听html页面滚动条滚动中滚动停止
关于前端:仅靠H5标签就能实现收拉效果我说的是真的
关于前端:数据中心可视化合集-图扑数字孪生机房解锁运维新境界

站内搜索

-「」