2024年Web前端最新为啥面试官总喜欢问computed是咋实现的？，这些细节在前端面试上要注意了

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

1 2 3 4 5 6 7 8 9 10 11 12 13	const state = reactive({ a: 1, b: 2, c: 3 }) // 有没有很像计算属性的感觉 const sum = effect(() => { console.log(``'执行计算'``)``// 立刻被打印 const value = state.a + state.b return value }) console.log(sum)``// undefined

想要实现computed的懒执行，咱们可以参考上篇文章Vue3：原来你是这样的“异步更新”的思路，添加一个额外的参数lazy。

它要实现的功能是：如果传递了lazy为true，副作用函数将不会立即执行，而是将执行的时机交还给用户，由用户决定啥时候执行。

当然啦！回调的结果我们也应该一并返回（例如上面的value值）

你能想象，我们仅仅需要改造几行代码就能离computed近了一大步。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	const effect = function (fn, options = {}) { const effectFn = () => { // ... 省略 // 新增res存储fn执行的结果 const res = fn() // ... 省略 // 新增返回结果 return res } // ... 省略 // 新增，只有lazy不为true时才会立即执行 if (!options.lazy) { effectFn() } // 新增，返回副作用函数让用户执行 return effectFn }

测试一波

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	const state = reactive({ a: 1, b: 2, c: 3, }); // 有没有很像计算属性的感觉 const sum = effect(() => { console.log(``"执行计算"``);``// 调用sum函数后被打印 const value = state.a + state.b; return value; }, { lazy:``true }); // 不执行sum函数，effect注册的回调将不会执行 console.log(sum());``// 3

2. 依赖追踪

咱们初步实现了懒执行的特性，为了更像computed一点，我们需要封装一个函数。

1 2 3 4 5 6 7 8 9 10 11 12 13	function computed (getter) { const effectFn = effect(getter, { lazy:``true``, }) const obj = { get value () { return effectFn() } } return obj }

这就有点那么味道啦！

测试一波

可以看到computed只会依赖state.a和state.b，而不会依赖state.c，这得益于我们前面几篇文章实现的响应式系统，所以到了计算属性这里，我们不用改动任何代码，天然就支持。

不过还是有点小问题，我们读取了两次sum.value，sum却被执行了两次，这和computed缓存的特性就不符了。

别急，马上就要实现了这个最重要的特性了。

1 2 3 4 5 6 7 8 9 10 11 12 13	const state = reactive({ a: 1, b: 2, c: 3 }) const sum = computed(() => { console.log(``'执行计算'``) return state.a + state.b }) console.log(sum.value) console.log(sum.value)

3. 缓存

回顾一下computed的缓存特性:

1. 只有当其依赖的东西发生变化了才需要重新计算
2. 否则就返回上一次执行的结果。

为了缓存上一次计算的结果，咱们需要定义一个value变量，现在的关键是怎么才能知道其依赖的数据发生变化了呢？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	function computed (getter) { const effectFn = effect(getter, { lazy:``true``, }) let value let dirty =``true const obj = { get value () { // 2. 只有数据发生变化了才去重新计算 if (dirty) { value = effectFn() dirty =``false } return value } } return obj }

测试一波

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	const state = reactive({ a: 1, b: 2, c: 3 }) const sum = computed(() => { console.log(``'执行计算'``) return state.a + state.b }) console.log(sum.value)``// 3 console.log(sum.value)``// 3 state.a = 4 console.log(sum.value)``// 3 答案是错误的

寄上任务调度

不得不说，任务调度实在太强大了，不仅仅可以实现数组的异步批量更新、在computed和watch中也是必不可少的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	function computed (getter) { const effectFn = effect(getter, { lazy:``true``, // 数据发生变化后，不执行注册的回调，而是执行scheduler scheduler () { // 数据发生了变化后，则重新设置为dirty，那么下次就会重新计算 dirty =``true } }) let value let dirty =``true const obj = { get value () { // 2. 只有数据发生变化了才去重新计算 if (dirty) { value = effectFn() dirty =``false } return value } } return obj }

测试一波

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	const state = reactive({ a: 1, b: 2, c: 3 }) const sum = computed(() => { console.log(``'执行计算'``) return state.a + state.b }) console.log(sum.value)``// 3 console.log(sum.value)``// 3 state.a = 4 console.log(sum.value)``// 3 答案是错误的

完美！！！这下面试官再也难不倒我了！！！

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• 

EKND-1715450181304)]

常用算法面试题：

• [外链图片转存中…(img-PZJiTTeK-1715450181305)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

• [外链图片转存中…(img-cAoBzh1y-1715450181305)]