用友前端春招 二面(45min)

本人东南大学大四应届生目标前端开发岗有项目经验，有实习经历求内推#春招#

1、工作中有遇到的难点，或者可以作为亮点介绍的2、问了webpack的性能优化3、CDN是什么，有什么作用4、介绍CSS优先级5、通过CSS选择器把div下面的最后一个p标签选出来6、如何设置 div下面的两个div元素水平居中7、flex常见的属性有哪些8、http状态码，304是什么9、问了协商缓存的字段 Etag 和 last-modified场景题：设计一个弹窗，当用户第一次访问页面时，弹窗会显示。用户关闭弹窗后，7天内再次访问页面时，弹窗不会再次显示10、localStorage和sessionStorage的区别，以及localStorage和cookie的区别11、问了js的数...

从一些面经里面扒出来整理的框架其实感觉不是重点考察的点啊 但是简单的八股还是要背背 原理这些我感觉无所谓 因为我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 的优缺点。（提示：命名冲突、代码组织、类型推导）

== 和 === 有什么区别？说输出结果 console.log([] == ''); // true console.log(null === undefined); // false 说一下变量提升？箭头函数的 this 是什么？请简述一下 Promise ？ // 说输出结果 function test() { setTimeout(function () { console.log(1) }, 0) new Promise(resolve => { console.log(2) resolve() console...