下面我把所有问题 + 完整可背答案一次性给全，Vue3 + 环保项目场景，你直接背就能面试用。

一、基础必问（答案版）

1. Vue3 生命周期顺序

setup → onBeforeMount → onMounted → onBeforeUpdate → onUpdated → onBeforeUnmount → onUnmounted

常用：

• onMounted：初始化请求、地图、ECharts、WebSocket
• onUnmounted：销毁定时器、关闭 WebSocket、释放 ECharts

2. Vue2 vs Vue3 响应式原理

• Vue2：Object.defineProperty，监听对象属性，数组/新增属性监听不到
• Vue3：Proxy 代理整个对象，能监听数组、新增/删除属性，性能更好

3. v-if vs v-show

• v-if：真正销毁/重建，切换开销大，初始开销小
• v-show：display:none/block，切换开销小，初始渲染开销大 场景：频繁切换用 v-show，否则 v-if

4. computed vs watch

• computed：计算属性，有缓存，依赖变才重新计算
• watch：监听数据，执行副作用（请求、定时器、复杂逻辑）

5. Vue3 组件通信

1. 父子：props + emit
2. 父子深层：defineModel / v-model
3. 兄弟/跨级：provide/inject、Pinia
4. 任意：Pinia、事件总线（mitt）

6. 防抖节流（环保大屏必用）

• 防抖：频繁触发只执行最后一次（搜索、窗口 resize）
• 节流：固定时间只执行一次（滚动、WebSocket 高频推送）

7. 跨域解决方案

前端常用：

1. devServer proxy（开发）
2. 后端 CORS（生产）
3. JSONP（仅 GET，少用）

8. 浏览器缓存

• 强缓存：Cache-Control / Expires，不发请求
• 协商缓存：Last-Modified / ETag，发请求 304

---

二、环保大屏/可视化（答案）

1. ECharts 大量数据卡顿优化

1. 数据分片/降采样
2. 加节流，不要频繁 setOption
3. 使用notMerge: true增量更新
4. 关闭不必要动画
5. 大屏用requestAnimationFrame

2. 高德/百度地图叠加点位、告警圈

1. 初始化地图实例
2. 用Marker展示设备点位
3. Circle画告警圈
4. Polygon区域染色
5. 点击弹窗展示详情

3. 实时数据推送

用 WebSocket：

• 心跳包保活
• 断线重连
• 消息防抖合并
• 页面隐藏时暂停/降低频率

4. 大屏自适应方案

最稳方案：

const scaleX = window.innerWidth / 1920;
const scaleY = window.innerHeight / 1080;
document.body.style.transform = `scale(${scaleX}, ${scaleY})`;

配合 flex 布局。

5. 图表联动下钻（省 → 市 → 县）

1. 点击图表获取区域 code
2. 父组件传 code 给子组件
3. 子组件请求对应级别数据
4. 重新渲染图表

---

三、环保 IoT/设备监测（答案）

1. 设备在线/离线实时展示

1. WebSocket 推送状态
2. 结合接口轮询兜底
3. 颜色：绿色在线、灰色离线、红色告警

2. 大量设备列表卡顿

1. 虚拟列表（vue-virtual-scroller）
2. 分页/加载更多
3. 避免大量 v-for 深度监听
4. 图片懒加载

3. 历史趋势时间切换

1. 切换时改变请求参数（hour/day/month）
2. 重新请求接口
3. ECharts setOption 更新

4. 告警列表实时推送

1. WebSocket 推送新告警
2. 前端去重、置顶、闪烁提示
3. 已读/未读状态管理

---

四、环保业务题（答案）

1. 常见环保指标

COD、氨氮、pH、SO₂、NOx、PM2.5、TVOC、溶解氧

2. 超标颜色判断

function getAlarmColor(val, standard) {
  if (val < standard * 0.8) return "green";
  if (val < standard) return "orange";
  return "red";
}

3. 导出 Excel/PDF

• Excel：xlsx 库
• PDF：html2canvas + jspdf

4. 权限控制

1. 接口返回菜单/按钮权限列表
2. Pinia 存储
3. 自定义指令v-permission控制按钮显隐
4. 路由守卫控制页面访问

---

五、手写代码必背（直接背）

1. 防抖

function debounce(fn, delay = 500) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

2. 节流

function throttle(fn, delay = 500) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= delay) {
      fn(...args);
      last = now;
    }
  };
}

3. 时间格式化

function formatDate(t) {
  const d = new Date(t);
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, "0");
  const day = String(d.getDate()).padStart(2, "0");
  const hh = String(d.getHours()).padStart(2, "0");
  const mm = String(d.getMinutes()).padStart(2, "0");
  const ss = String(d.getSeconds()).padStart(2, "0");
  return `${y}-${m}-${day} ${hh}:${mm}:${ss}`;
}

4. 深度克隆

function deepClone(obj) {
  if (obj === null || typeof obj !== "object") return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof Array) return obj.map(deepClone);
  return Object.keys(obj).reduce((res, k) => {
    res[k] = deepClone(obj[k]);
    return res;
  }, {});
}

---

六、你没做过环保项目也能说的话术

“我虽然没有直接做过环保项目，但做过数据大屏、实时监控、IoT 设备展示、ECharts 可视化、地图叠加、WebSocket 推送、权限系统，这些和环保监测平台技术完全一致，能快速上手业务。”

---

我发现 Angular 的结构和微信小程序特别像，都是逻辑、模板、样式分离，指令语法（if/for/ 事件）也高度相似，我有小程序开发经验，所以上手 Angular 非常快，一天就能写页面

如果项目里需要，我会优先选成熟 SDK（比如高德），主要精力放在数据结构和性能优化上，比如点位聚合、接口并发、以及地图交互的流畅性。