2024 前端高频面试题之 Vue 篇
发布网友
发布时间：2024-09-25 15:22
共1个回答
热心网友
时间：2024-10-04 23:55
2. 在 v-for 中使用 key 可以避免 Vue 的默认复用策略，确保每个渲染项独立，通过唯一标识减少资源消耗，如使用唯一 ID。
3. 事件处理的 event 参数是原生事件对象，用于传递事件数据。事件通常绑定在元素上，通过 $event 参数获取事件详情。
4. 父子组件间通讯：通过 props 传递数据，$emit 触发自定义事件。$on 和 $off 分别用于绑定和解绑事件监听。
5. 声明周期：Vue 父子组件在加载、更新和销毁时，经历了多个阶段，理解生命周期顺序有助于优化性能和资源管理。
6. 双向绑定原理：Vue 通过数据劫持和观察者模式，实时响应数据变化，监听数据变化并更新视图。
7. $nextTick 是在下次 DOM 更新循环结束后执行的，处理异步操作，确保数据更新和视图同步。
8. vuex 是状态管理库，用于组件间的全局数据共享，通过 mutations、actions 和 modules 组织状态管理逻辑。
9. keep-alive 是缓存组件实例的特性，配合生命周期的 activated 和 deactivated 钩子，用于优化组件切换性能。
10. Vue3 相比 Vue2，引入 proxy 优化响应式系统，支持 TypeScript，以及 Composition API 提供更清晰的组件组织结构。
11. history 和 hash 路由的区别在于，history 模式更符合标准，但需后端支持，而 hash 虽简单但不美观，且不适用于路由更新。
12. 常用设计模式包括工厂模式、单例模式、观察者模式、策略模式和代理模式。在实际项目中，如虚拟 DOM 的创建、插件注册和视图更新等场景运用。
13. $emit 和 $on 是事件系统的核心，$emit 触发事件，$on 订阅事件，基于发布/订阅模式实现组件间的通信。
14. 虚拟 DOM 通过内存中模拟真实 DOM，通过 diff 算法更新。优点包括性能优化、避免直接操作 DOM 和跨平台性，但有性能消耗和初次渲染复杂度问题。
15. mixin 替代方案：Vue3 通过 Composition API 提供更清晰的代码结构和命名规则，减少了命名冲突。
16. 自定义指令扩展了 HTML 元素功能，基于指令对象在 Vue 编译过程中的钩子函数进行操作，提高代码复用。
17. 事件绑定原理是通过监听器和发布者模式，$on 作为监听器，$emit 作为发布者，实现组件间的通信。
18. $set 用于响应式数据的动态添加属性，当添加新属性时，会触发依赖更新。
19. Vue3 的优势在于性能提升、体积更小、类型支持增强、逻辑组织更清晰，以及引入新功能如 Composition API。
20. Vue3 的声明周期调整了部分生命周期钩子，如 beforeDestroy 变为 beforeUnmount，setup 函数整合了生命周期的开始阶段。
21. Composition API 与 Options API 提供不同的开发体验，前者更利于逻辑组织和代码复用，后者适用于简单项目。
22. ref 和 toRef/toRefs 用于创建响应式数据，ref 通常用于简单值，toRef 用于对象响应式，toRefs 用于对象解构。
23. ref 需要 value 属性来存储和响应式化数据，尤其在模板和 reactive 中是必需的。
24. Vue3 的重要升级包括 createApp、emits 选项、生命周期调整、异步组件处理等，增强了开发体验和灵活性。
