星星充电前端开发面经-已offer

#我的失利项目复盘#1. vue router如何监听路由改变事件2. vue router是如何调用生命周期的钩子函数的，监听路由改变事件的一定是一个对象吧，这个监听的对象是？3. 项目中使用了mitt Event-mitter库，里面的实现原理是？（订阅者和消费者模式），手动实现一下该模式和事件总线？4. 手动实现JS queue并写BFS5. 知道JS里能用到队列queue的情况吗，还有栈stack呢？（并发请求，路由 etc.）6. TS，1. 自动推断数组内的联合数据类型 |2. 有一个函数，参数a是任意对象，参数b的类型一定是参数a属性（x, y）中的一个，TS类型推断怎么写7. 你项目里角色，用户，权限三者的模型了解过吗？怎么设计的？鼠鼠我还是太菜了，面的汗流浃背了

一面，聊了有80分钟！中间还断网了一次先是结合项目经验聊问问题，有移动端的兼容问题，在移动端下也是用px去定义吗，感觉有一半的时间都是在聊项目vue2和vue3的区别，我说到了vue3中组件无需注册，会问为什么不需要注册vue3的父子组件兄弟组件传参vuex和pinia的区别，具体用法上id，class，内联选择器的权重，具体到权重到什么程度三个span标签怎么让他们垂直居中，三个div，中间宽度不确定，两边宽度确定编程题输入数字 输出100，000，000

从一些面经里面扒出来整理的框架其实感觉不是重点考察的点啊 但是简单的八股还是要背背 原理这些我感觉无所谓 因为我React原理背了一堆感觉也没什么用一、基础概念与原理1. Vue 的 MVVM 模式是什么？MVVM（Model-View-ViewModel）通过数据绑定实现视图与数据的自动同步。  - Model：数据层，负责业务逻辑。  - View：UI 层，展示数据。  - ViewModel：双向绑定桥梁，监听数据变化并更新视图。2. Vue2 与 Vue3 的核心区别  - 响应式系统：Vue2 使用 Object.defineProperty，Vue3 改用 Proxy，支持深层对象和数组监听。  - Composition API：Vue3 提供更灵活的代码组织方式，替代 Options API 的逻辑分散问题。  - 性能优化：Vue3 通过静态提升（Static Hoisting）和 Patch Flag 减少虚拟 DOM 对比开销。3. Vue 生命周期钩子函数及作用  - 创建阶段：beforeCreate（数据未初始化）、created（可访问数据，但 DOM 未挂载）。  - 挂载阶段：beforeMount（模板编译完成）、mounted（DOM 渲染完成，适合异步请求）。  - 更新阶段：beforeUpdate、updated（数据变化后触发）。  - 销毁阶段：beforeDestroy（清理定时器）、destroyed。二、核心机制与优化4. 响应式原理实现  - Vue2：通过 Object.defineProperty 递归劫持对象属性，结合发布-订阅模式收集依赖。  - Vue3：基于 Proxy 代理对象，支持动态属性添加和数组索引修改，减少初始化性能损耗。5. 虚拟 DOM 与 Diff 算法的作用  - 虚拟 DOM：JS 对象模拟真实 DOM，减少直接操作 DOM 的性能损耗。  - Diff 算法：同级对比新旧虚拟 DOM，通过 Key 标识复用节点，最小化更新范围。6. Computed 和 Watch 的区别  - Computed：依赖缓存，适合派生数据（如过滤列表），仅在依赖变化时重新计算。  - Watch：监听数据变化执行回调，支持异步操作，适用于数据变动后的复杂处理。三、组件与通信7. 组件通信方式  - 父子组件：props 传值，$emit 触发事件。  - 跨层级：provide/inject（依赖注入）、Vuex 全局状态管理。  - 兄弟组件：事件总线（Event Bus）或通过父组件中转。8. 动态组件与异步组件  - 动态组件：使用  动态切换组件。  - 异步组件：通过 defineAsyncComponent 或路由懒加载（() => import('./Component.vue')）优化首屏性能。9. 插槽（Slots）的应用场景  - 默认插槽： 接收父组件内容。  - 具名插槽： 指定插入位置。  - 作用域插槽：子组件通过 v-bind 传递数据给父组件14。四、路由与状态管理10. Vue Router 的导航守卫  - 全局守卫：beforeEach（路由跳转前鉴权）、afterEach（跳转后操作）。  - 路由独享守卫：beforeEnter。  - 组件内守卫：beforeRouteEnter（无法访问 this）、beforeRouteUpdate。11. Vuex 的核心概念  - State：存储全局状态。  - Mutations：同步修改状态（通过 commit 触发）。  - Actions：异步操作后提交 Mutations（通过 dispatch 触发）。  - Getters：计算派生状态。五、高频实战问题12. v-if 与 v-show 的区别  - v-if：条件渲染，销毁/重建 DOM，适用于切换频率低的场景。  - v-show：通过 CSS display 控制显示，适合频繁切换。13. v-for 为何需要 Key？Key 帮助 Vue 识别节点身份，优化 Diff 算法效率，避免渲染错误14. Vue 性能优化手段  - 使用 v-once 或 v-memo 缓存静态内容。  - 路由懒加载、组件异步加载。  - 避免深层响应式对象，合理使用 Object.freeze。六、原理类高频问题1. Vue 的响应式系统中，Object.defineProperty 和 Proxy 在实现上有何本质区别？Vue3 改用 Proxy 解决了哪些痛点？（提示：数组监听、动态属性、性能开销）2. 依赖收集（Dependency Collection）和派发更新（Trigger Updates）的具体流程是怎样的？请描述 Dep 和 Watcher 的协作关系。（提示：发布-订阅模式、getter/setter 触发时机）3. Vue 的模板编译过程经历了哪几个阶段？如何将模板字符串转换为渲染函数？（提示：解析器生成 AST → 优化器标记静态节点 → 代码生成器生成 render 函数）4. 虚拟 DOM 的 Diff 算法中，为什么要优先进行“同层比较”而不是跨层递归？Key 值在 Diff 过程中起到了什么作用？（提示：时间复杂度优化、节点复用策略）5. Vue 的异步更新队列（Async Update Queue）是如何工作的？为什么修改数据后立即访问 DOM 可能获取不到最新值？（提示：nextTick 实现原理、事件循环与微任务）6. Vue3 的静态提升（Static Hoisting）和 Block Tree 机制如何优化渲染性能？（提示：跳过静态节点比对、动态节点标记 Patch Flags）7. 计算属性（Computed）的缓存特性是如何实现的？与普通方法调用有何本质区别？（提示：脏检查机制、依赖追踪）8. Vue 组件实例化过程中，data 选项为什么要用函数返回对象，而不是直接写对象？（提示：避免多个实例共享同一数据引用）9. Vue 的事件系统是如何实现 v-on 的？事件修饰符（如 .native）底层做了哪些处理？（提示：原生事件与自定义事件的分发机制）10. Vue3 的 Composition API 如何解决逻辑复用问题？对比 Mixins 和 Hooks 的优缺点。（提示：命名冲突、代码组织、类型推导）

1 React的class组件和函数组件有什么区别2 HOC和hooks，各自的优缺点是什么3 常见的hooks有哪些4 父组件调用子组件的方法，可以用什么hook5 讲讲useEffect原理。它是如何识别依赖的变化的？它又是如何执行的？6 http的问题和缺点是什么7 讲一个最难的项目？你是怎么做性能优化的？