2024年Web前端最全Vue3的响应式原理解析(2)，京东安卓面试题

后话

---

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

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

function reactive (obj) {

if (typeof obj !== ‘object’ && obj != null) {

return obj

}

// Proxy相当于在对象外层加拦截

// http://es6.ruanyifeng.com/#docs/proxy

const observed = new Proxy(obj, {

get (target, key, receiver) {

// Reflect用于执行对象默认操作，更规范、更友好

// Proxy和Object的方法Reflect都有对应

// http://es6.ruanyifeng.com/#docs/reflect

const res = Reflect.get(target, key, receiver)

console.log(获取${key}:${res})

return res

},

set (target, key, value, receiver) {

const res = Reflect.set(target, key, value, receiver)

console.log(设置${key}:${value})

return res

},

deleteProperty (target, key) {

const res = Reflect.deleteProperty(target, key)

console.log(删除${key}:${res})

return res

}

})

return observed

}

//代码测试

const state = reactive({

foo: ‘foo’,

bar: { a: 1 }

})

// 1.获取

state.foo // ok

// 2.设置已存在属性

state.foo = ‘fooooooo’ // ok

// 3.设置不存在属性

state.dong = ‘dong’ // ok

// 4.删除属性

delete state.dong // ok

嵌套对象响应式

测试：嵌套对象不能响应

// 设置嵌套对象属性

react.bar.a = 10 // no ok

添加对象类型递归

// 提取帮助方法

const isObject = val => val !== null && typeof val === ‘object’

function reactive (obj) {

//判断是否对象

if (!isObject(obj)) {

return obj

}

const observed = new Proxy(obj, {

get (target, key, receiver) {

// …

// 如果是对象需要递归

return isObject(res) ? reactive(res) : res

},

//…

}

避免重复代理

重复代理，比如

reactive(data) // 已代理过的纯对象

reactive(react) // 代理对象

解决方式：将之前代理结果缓存，get时直接使用

const toProxy = new WeakMap() // 形如obj:observed

const toRaw = new WeakMap() // 形如observed:obj

function reactive (obj) {

//…

// 查找缓存，避免重复代理

if (toProxy.has(obj)) {

return toProxy.get(obj)

}

if (toRaw.has(obj)) {

return obj

}

const observed = new Proxy(…)

// 缓存代理结果

toProxy.set(obj, observed)

toRaw.set(observed, obj)

return observed

}

// 测试效果

console.log(reactive(data) === state)

console.log(reactive(state) === state)

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

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

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。