前端面试每日三题 - Day 10

这是我为准备前端/全栈开发工程师面试整理的第十天每日三题练习，涵盖：

• JavaScript 中 this 的指向详解与常见陷阱
• Vue 生命周期钩子的执行顺序与场景实践（Vue2 vs Vue3）
• 系统设计实战：内容推荐系统的核心架构设计

---

✅ 题目 1：JavaScript 中 this 的指向详解与常见陷阱

📘 解析：

this 是 JavaScript 中最容易误解的机制之一，它的指向取决于函数的调用方式，而不是定义方式。

📌 常见场景：

1. 普通函数调用：

function sayName() {console.log(this.name);
}const name = 'Global';
sayName(); // this -> window（严格模式下为 undefined）

2. 对象方法调用：

const user = {name: 'Alice',sayName() {console.log(this.name);}
};
user.sayName(); // this -> user

3. 构造函数调用：

function Person(name) {this.name = name;
}
const p = new Person('Tom'); // this -> 实例对象 p

4. 箭头函数：不绑定自己的 this，继承外层作用域的 this

const obj = {name: 'Arrow',sayName: () => {console.log(this.name);}
};
obj.sayName(); // undefined（this -> window）

5. 手动绑定：call、apply、bind

function show() {console.log(this.name);
}
const user = { name: 'Bob' };
show.call(user); // Bob

🧠 记忆脑图建议：

• this 绑定优先级图谱：new > bind > call/apply > 对象方法 > 全局
• 场景联想 + 函数调用方式分类

---

✅ 题目 2：Vue 生命周期钩子的执行顺序与场景实践（Vue2 vs Vue3）

📘 解析：

Vue 生命周期是组件开发的核心。Vue 2 和 Vue 3 的生命周期略有差异，Vue 3 引入了 Composition API 和 setup()，更适合逻辑复用。

📌 Vue 2 生命周期钩子：

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

export default {data() {return { msg: "hello" };},created() {console.log("created");},mounted() {console.log("mounted");},destroyed() {console.log("destroyed");}
};

📌 Vue 3 生命周期对比：

Vue 3 使用 Composition API：

import { onMounted, onUpdated, onUnmounted } from "vue";export default {setup() {onMounted(() => {console.log("mounted");});onUpdated(() => {console.log("updated");});onUnmounted(() => {console.log("unmounted");});}
}

生命周期阶段	Vue 2 Options API	Vue 3 Composition API
创建阶段	created	setup()
挂载阶段	mounted	onMounted
更新阶段	updated	onUpdated
销毁阶段	destroyed	onUnmounted

🔍 使用场景实践：

• 数据初始化：created/setup
• DOM 依赖操作：mounted/onMounted
• 清理定时器或监听器：beforeDestroy/destroyed 或 onUnmounted

🧠 记忆脑图建议：

• 对比图 + 适用场景
• 生命周期流程图，标注 Composition API 对应钩子

---

✅ 题目 3：系统设计-内容推荐系统的核心架构设计

📘 解析：

内容推荐系统广泛用于新闻、视频、短内容类产品，核心目标是“个性化”和“实时性”。

🔧 架构核心模块：

1. 用户行为采集层：

   • 点击、浏览、点赞、分享、停留时间
   • 使用前端埋点系统或 SDK 上传

2. 日志流处理层（实时处理）：

   • Kafka/Flume -> Spark/Flink 实时计算
   • 构建用户画像、行为标签、热度指标

3. 推荐引擎服务层：

   • 协同过滤算法（基于用户/内容相似性）
   • 内容召回 + 精排模型（CTR、深度学习模型）
   • AB 测试平台支持多策略灰度上线

4. 缓存与接口服务层：

   • Redis 存储用户推荐结果
   • Node.js/Go 实现高性能接口（GraphQL/REST）

5. 前端展示层：

   • 按模块展示推荐内容（新闻流/短视频流）
   • 滚动加载、懒加载、智能曝光统计

示例：推荐结果缓存接口（Node.js）

app.get('/api/recommend', async (req, res) => {const userId = req.query.userId;const cached = await redis.get(`recommend:${userId}`);if (cached) return res.send(JSON.parse(cached));const result = await recommendService.getForUser(userId);await redis.set(`recommend:${userId}`, JSON.stringify(result), 'EX', 60);res.send(result);
});

🧠 记忆脑图建议：

• 推荐系统五层架构图
• 算法策略流程图 + 示例

---

🧾 今日总结

题目	涉及知识点	关键收获
this 指向机制	JavaScript	掌握不同调用方式下 this 的指向与绑定规则
Vue 生命周期对比	Vue2 vs Vue3	掌握生命周期钩子变化，结合场景实践
内容推荐系统设计	系统设计	理解推荐架构的五大模块及前端接口优化

---

📅 明日预告

• JavaScript 模块化发展历程与 ES Modules
• React 中的 Fiber 架构解析
• 统设计实战：图片/视频 CDN 分发系统设计

---

💡 坚持每天进步一点点，面试成功自然水到渠成！加油，未来的前端大牛！