Vue面试深度解析：核心概念与实战技巧

"Vue面试题集锦，涵盖了Vue的核心知识点、vue-router的使用以及vuex状态管理，并涉及HTTP请求和UI样式的相关问题。" ### Vue核心知识点 1. **渐进式框架理解**：Vue作为渐进式框架，允许开发者逐步引入所需的特性，而不是一次性加载整个库，这使得它在不同项目规模中都具有很好的适应性。 2. **Vue的两个核心**：响应式数据绑定和组件化。响应式系统让数据改变自动更新视图，而组件化则提高了代码复用和模块化。 3. **v-if与v-show的区别**：v-if是条件渲染，不会渲染或销毁DOM元素，而v-show会始终渲染元素，只是通过CSS控制显示隐藏。 4. **常用修饰符**：例如`.prevent`阻止默认行为，`.stop`阻止事件冒泡，`.once`监听一次事件等。 5. **v-on监听多个方法**：可以使用逗号分隔，如`v-on:click="method1, method2"`。 6. **key值作用**：用于Vue识别新旧虚拟DOM节点，提高更新效率。 7. **event对象使用**：在事件处理函数中，event对象可以访问到原生事件的相关信息，如`@click="handleClick($event)"`。 8. **v-for与v-if优先级**：v-if有更高的优先级，当两者同时存在时，v-if会先被评估。 9. **子组件调用父组件**：通过`this.$parent`或`$emit`触发父组件的方法。 10. **编写可复用组件**：利用props接收外部数据，通过slots插入自定义内容，确保组件无特定业务依赖。 11. **生命周期和钩子函数**：Vue组件有多个生命周期阶段，如`created`、`mounted`、`updated`等，钩子函数用于在特定阶段执行逻辑。 12. **监听键盘事件**：通过`@keydown`或`@keyup`监听，配合`event.keyCode`判断按键。 13. **数组更新触发视图**：Vue无法检测到数组内元素的替换，需要使用`Vue.set`、`splice`或`concat`等方法。 14. **对象更改检测**：Vue不监听对象属性的添加或删除，需在初始化时声明所有可能变异的属性。 15. **v-for实现active切换**：通过v-bind绑定一个活性状态变量，结合CSS实现高亮。 16. **v-model语法糖**：在自定义组件中，用于实现双向数据绑定。 17. **常用的自定义过滤器**：如`| capitalize`、`| date`等，用于格式化数据。 18. **单页应用优缺点**：优点包括更好的用户体验、易于维护，缺点如SEO困难、首屏加载慢等。 19. **计算属性与方法**：计算属性基于依赖缓存，而方法每次调用都会执行。 20. **父传子数据**：通过props传递，子组件不能直接修改。 21. **禁用滚动条**：通过CSS或JavaScript控制`body`的`overflow`属性。 22. **计算属性缓存与方法**：计算属性在依赖不变时不会重新计算，而方法每次调用都会执行。 23. **自定义指令**：扩展Vue的DOM操作能力，如`v-custom`。 ### Vue Router 1. **响应路由参数变化**：使用`watch`或导航守卫监听`$route`对象。 2. **导航解析流程**：解析URL、匹配路由、激活组件、渲染目标组件。 3. **导航钩子**：全局守卫、组件守卫、路由独享守卫等。 4. **实例方法**：如`router.push`、`router.replace`等。 5. **动态路由匹配**：使用`:`定义动态段。 6. **嵌套路由**：在路由配置中定义子路由。 7. `<router-link>`组件：用于创建链接，改变路由。 8. **路由懒加载**：使用`() => import()`实现按需加载。 9. **路由模式**：hash模式和history模式。 10. **history模式与后台配合**：需要服务器配置支持。 ### Vuex 1. **Vuex介绍**：Vuex是Vue的状态管理模式，集中管理组件间共享状态。 2. **核心概念**：state（状态）、mutations（状态变更）、actions（异步操作）、getters（计算属性）。 3. **Vue CLI应用**：通过`vuex`插件初始化，然后在main.js中安装和使用。 4. **组件使用Vuex**：通过`mapState`、`mapGetters`、`mapMutations`和`mapActions`辅助函数。 5. **异步修改**：actions用于异步操作，然后提交mutations改变state。 6. **缓存策略**：利用浏览器的localStorage或sessionStorage保存状态。 ### HTTP请求 1. **axios与ajax区别**：axios基于Promise，支持更多特性，如取消请求、浏览器兼容性等。 2. **同源策略**：限制了不同源之间的交互，防止恶意脚本攻击。 3. **跨域问题**：不同源之间请求被视为跨域，需要通过CORS、JSONP等方式解决。 4. **解决跨域**：设置CORS头、JSONP、代理服务器等。 5. **模拟JSON数据**：使用mock.js或在devServer中配置。 6. **HTTP请求管理**：创建axios实例，封装API接口，集中管理请求。 7. **axios特点**：易用性、支持Promise API、拦截器、自动转换请求和响应数据等。 ### UI样式 1. **scoped属性**：使组件内部的CSS只对当前组件生效。 2. **CSS局部作用**：使用`<style scoped>`或CSS Modules。 3. **CSS预处理器**：如Sass、Less等，提供更强大的样式编写能力。 以上内容涵盖了Vue面试中常见的技术点，帮助面试者更好地准备Vue相关的面试。