2023vue面试题总结

Vue.js 是一款流行的前端JavaScript框架，它以MVVM（Model-View-ViewModel）模式为基础，致力于简化用户界面的构建和维护。以下是对2023年Vue面试题中涉及的知识点的详细解释： 1. MVVM 与 MVC 的区别： MVVM模式实现了View和Model的双向绑定，当Model中的属性改变时，View会自动更新，反之亦然。这种绑定机制简化了业务逻辑和界面之间的依赖，避免了直接操作DOM，提高了效率。 2. Vue中data为什么是一个函数： 在Vue组件中，data必须是一个函数，因为每次组件实例化时，这个函数会被调用，确保每个组件实例都有自己的独立数据副本，避免了数据污染。 3. Vue组件通讯方式： - **props** 和 **$emit**：父组件通过props向下传递数据，子组件通过$emit触发事件来响应。 - **$parent** 和 **$children**：直接访问父组件和子组件实例。 - **$refs**：获取组件实例，常用于直接操作组件方法或属性。 - **provide** 和 **inject**：父组件提供数据，子孙组件注入接收。 - **Vuex**：全局状态管理库，实现组件间的数据共享。 4. Vue的生命周期方法： - **beforeCreate**：实例初始化后，数据观测和配置完成前。 - **created**：实例创建完成，数据已完成初始化。 - **beforeMount**：挂载开始前，render函数首次被调用。 - **mounted**：挂载完成后，真实DOM已经生成。 - **beforeUpdate**：数据更新时调用，但不会触发重绘。 - **updated**：更新完成后，组件DOM已更新。 - **beforeDestroy**：实例销毁前。 - **destroyed**：实例销毁后，所有绑定解除，事件监听器移除。 - **activated** 和 **deactivated**：keep-alive组件的激活和销毁回调。 5. 异步请求时机： 异步请求通常在`created`、`beforeMount`、`mounted`钩子函数中执行，因为这些阶段数据已准备就绪，可以将结果直接赋值给data。 6. 单向数据流： 数据只能从父组件流向子组件，子组件不能直接修改父组件的数据，但可以通过自定义事件向父组件发送请求更新数据。 7. computed和watch的区别： - **computed**：计算属性，基于依赖计算出新值，有缓存，仅在依赖变化时更新。 - **watch**：监听属性变化，发生变化时执行回调，常用于复杂逻辑处理或异步操作。 8. Vue 2.0响应式数据原理： 通过`Object.defineProperty`劫持数据属性，设置getter和setter，当数据变化时，通过观察者模式通知Watcher，进而触发视图更新。 9. Vue Router： - **全局守卫**：beforeEach、beforeResolve、afterEach，控制页面跳转。 - **组件守卫**：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，组件级别的路由控制。 - **生命周期**：不同阶段的钩子执行顺序。 10. Vuex核心概念： - **state**：存储应用的状态。 - **getter**：从state中获取数据的计算属性。 - **mutation**：同步修改state的唯一方法。 - **action**：可以包含异步操作，通过commit提交mutation。 - **module**：模块化状态管理，用于大型项目。 11. Vue性能优化： - 尽量避免将不需要响应式的数据放入data。 - v-if与v-show根据场景选择使用，v-if适用于条件判断较复杂的情况。 - computed和watch合理使用，避免不必要的计算和监听。 - v-for遍历添加key，推荐使用唯一id，避免同时使用v-if。 - 大数据列表和表格使用虚拟滚动或虚拟表格提高性能。 - 图片懒加载技术减少初始加载量。 - 路由懒加载按需加载组件。 - 使用keep-alive缓存组件，减少重复渲染。 - key保证唯一性，优化虚拟DOM比较。 - 第三方模块按需导入，减少体积。 - 预渲染提升SEO和首屏加载速度。 - 服务端渲染SSR提升SEO和首屏渲染速度。 - 压缩代码和CDN加载第三方库，减少网络传输时间。 以上就是Vue面试题中涉及的核心知识点，涵盖了Vue的基本概念、组件通信、状态管理、路由、性能优化等多个方面。理解并熟练掌握这些知识对于Vue开发者来说至关重要。