【前端面经】美团-核心本地商业-业务研发平台（暑期，oc）

一面（2025/05/06）
1. 自我介绍
2. 社交、新闻数据聚合平台项目相关
    1. 导师项目还是个人项目
    2. 架构设计，比如技术选型、前后端怎么设计、怎么考虑并发、预期 TPS 等
    3. 爬虫的数据怎么与后端联动的，因为后端用的 Node.js（面试官觉得 Python 与 Node.js 无法直接交互，但我们后端的作用只是负责给前端提供数据，爬虫的数据会直接写入数据库然后被分析）
3. OJ 项目相关
    1. 权限设计
    2. token 怎么存的，为什么这么存，存在本地安全吗，如果重新设计该怎么做确保安全（回答的存在服务端，然后客户端使用 id 去拿到服务端的 token，id 存在 cookie 里，似乎有其他更好的办法）
    3. 那怎么确保这个 id 安全，加有效期限
    4. 还有吗，提示：比如我通过 JS 获取到（设置 HttpOnly，禁止脚本获取 cookie）
    5. Vue 里面有个路由守卫，可以控制不同权限的用户访问不同的路由。那 js 可以怎么实现呢，如果用户直接浏览器跳转呢（ 回答的前端手动实现路由守卫，控制用户能看到哪些页面，后端权限校验，不通过返回 403）
4. 代码输出，说思路（面试官一直在提示，但我没答上来，this 指向没学得好）
```js
function Counter() {
  this.count = 0;
  setInterval(function() {
    this.count++;
    console.log(this.count);
  }, 1000);
}
const a = new Counter()
```
5. 代码输出，说思路
```js
console.log(1)
setTimeout(function() {
   console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
   console.log(3)
   resolve(1000) // 标记为成功
   console.log(4)
});
p.then(data => {
  console.log(data)
})
console.log(5)
```
6. flex，怎么垂直居中，flex-grow 是什么
7. 用 css 实现一个三角形
8. 实现一个 Vue 的 keep alive，面试官一直在提示我(ಥ_ಥ)
```js
class KeepAlive {
  constructor(maxNum = 5) {
  this.cache = new Map();
  this.maxNum = maxNum;
}

  addVNode(key, vNode) {
    if (this.cache.has(key)) {
      this.cache.delete(key);
    } else if (this.cache.size >= this.maxNum) {
      const oldKey = this.cache.keys().next().value;
      this.cache.delete(oldKey);
    }
    this.cache.set(key, vNode);
  }

  getVNode(ley) {
    return this.cache.get(key);
  }
}
```
9. module 、chunk 和 bundle 的区别
10. 实现方法把数组的非零元素放在前面，零元素放在后面，O(1) 空间复杂度
```js
function moveZero2End(arr) {
  let p = 0;
  for (let i = 0; i < arr.length; ++i) {
    if (arr[i] !== 0) {
      arr[p++] = arr[i];
    }
  }
  while (p < arr.length) {
    arr[p++] = 0;
  }
  return arr;
}
```
11. 有没有在用 AI 工具，怎么用的，被夸了，说我接触的很深
12. 反问：对我面试的不满之处和建议（被夸了哈哈，说我思路清晰，回答或者做题之前会说思路，建议就是多补齐前端知识的宽度和广度）

面试官很会引导你，还会解释自己的问题，面试体验非常的棒。秒约二面～

二面（2025/05/08）

1. 自我介绍
2. 讲一下 HTTP 不同版本的区别（这里一开始说的有些乱了，面试官让我重新总结一遍）
3. Vue 2/3 的区别
4. Vue 实现倒计时组件
5. m 元钱随机分给 n 个人，最大可分到 m/2，最小可分到 0.1
6. OJ 项目
    1. 几个人开发，开发周期
    2. 为什么要重构
    3. 说一个有挑战的事或难点（这里讲的智能训练流程图的组件封装，但面试官似乎不太满意？让我再说说，我就说了信息聚合可视化项目的难点，说了两个：插件开发 / 爬虫中高价值用户获取整体流程与迭代思路）
7. 用过 AI 吗，应用方面的呢
8. 对 AI 的基础知识或原理了解多少
9. DeepSeek 听说过吗，聊一聊实际使用情况
10. 用过 AI 编辑器吗，如 Cursor、Windsurf，使用体验怎么样
11.  反问
    1. 面试反馈：整体还可以，但是需要打好基础并扩展技术栈如 React，沟通的时候要先理清楚逻辑，AI 浪潮下要对 AI 相关的内容保持关注
    2. 多久出结果：一周内
    3. 工作时间：实习生宽松一些，早十晚八（意思是正式员工会更晚吗）

自我介绍完面试官沉默了一段时间，回答完基础知识又沉默了一段时间，我以为我要寄了！然后算法相关，真的很幸运，面试前十分钟看了牛客上的面经，结果真的问到了！