大厂面试题解析（大厂面试参考指南）

1. vue2和vue3的区别：

- Vue3使用Proxy替代Vue2的Object.defineProperty，更好地支持响应式，尤其是数组和对象。

- Vue3采用Composition API，代码复用更灵活，而Vue2主要是Options API。

- Vue3的性能优化，比如静态提升、编译器优化，体积更小。

- 生命周期钩子变化，比如created在Vue3仍有，mounted等有调整，新增了setup。

2. vue2的指令原理和vue3有什么区别：

- Vue2指令通过Object.defineProperty劫持数据，依赖收集和派发更新。

- Vue3指令基于Proxy，响应式系统更高效，指令钩子函数参数也有变化，比如bind、update等，Vue3的更新检测更精准。

3. setup中直接使用异步会有什么问题：

- Setup函数是同步的，直接返回异步函数（如async setup()）会导致组件无法正常渲染。应该在setup中返回一个对象，异步操作可以通过ref或reactive包装，在onMounted等生命周期中执行异步操作。

4. vue2的nexttick和vue3 nexttick原理：

- 两者都是等待DOM更新后执行回调。Vue2中，nextTick利用Promise、MutationObserver等机制，将回调放入微任务队列。Vue3的nextTick同样基于Promise，内部使用queueMicrotask，确保在DOM更新后执行。

5. watchEffect原理：

- Vue3的watchEffect是响应式副作用函数，自动追踪依赖，当依赖的响应式数据变化时，重新执行回调。内部通过effect函数创建副作用，收集依赖，依赖变化触发重新执行。

6. pinia对比vuex：

- Pinia更简单，没有mutations，只有state、getters、actions。

- Pinia支持Vue3的Composition API，更灵活。

- 更好的TS支持，体积更小，性能优化。

7. teleport在ssr中会有什么问题：

- Teleport用于将组件内容渲染到DOM其他位置。SSR中，客户端和服务器端渲染的位置可能不一致，导致hydration mismatch（ hydration阶段不匹配），因为服务器端渲染时可能无法识别Teleport的目标节点，需要特殊处理，比如检查目标节点是否存在。

8. vue3的v-model和vue2有什么区别：

- Vue2中v-model是语法糖，对于表单元素绑定value和@input。Vue3中v-model更灵活，组件可以接收多个v-model，绑定不同属性，语法上用v-model:propName，且内部实现更高效。

9. 说项目：

- 这需要结合实际项目经验，阐述项目背景、技术选型、自己负责的模块、遇到的问题及解决方案，突出技术点和优化。

10. 大文件断点续传是什么做的：

- 利用HTTP的Range请求头，将文件分块上传。服务端支持断点续传，记录已上传的块，客户端检查未上传的块继续上传。前端可以用Blob.slice()分块，后端处理每个块的接收和合并。

11. 防抖节流：

- 防抖（debounce）：多次触发事件，只在最后一次触发后执行函数，比如搜索框输入，停止输入后再请求。

- 节流（throttle）：规定时间内只执行一次，比如滚动事件，每隔一段时间执行一次。

12. canvas和svg的区别 canvas表格实现大数据加载：

- Canvas是像素级，绘制后内容不易修改，适合游戏、图表。SVG是矢量图形，DOM元素，适合图标、可交互图形。

- Canvas实现大数据表格：利用分层绘制，只绘制可见区域，减少渲染压力，使用requestAnimationFrame优化。

13. 数组去重：

- ES6 Set：[...new Set(arr)]。

- 遍历判断，利用对象属性是否存在，如：

function unique(arr) {

let obj = {};

return arr.filter(item => {

return obj.hasOwnProperty(item) ? false : (obj[item] = true);

});

}

14. 性能优化：

- 前端性能优化：减少HTTP请求（合并文件、缓存），优化图片（压缩、懒加载），代码分割（Webpack分包），减少重绘回流，使用CDN，SSR等。

15. 内存泄漏怎么排查 js的垃圾回收机制：

- JS垃圾回收：标记清除算法，对象不再被引用时回收。

- 内存泄漏排查：Chrome DevTools的Memory面板，堆快照对比，查看分离DOM（孤立的DOM节点），检查全局变量、事件监听未移除等。