Vue2面试深度解析：17大核心问题

"Vue2面试题集合，涵盖了Vue2的核心概念和使用技巧，包括路由、组件、生命周期、数据管理等多个方面。" Vue2面试题详细解答： 1、$route和$router的区别 $router是VueRouter的实例，用于管理整个路由系统，包括导航到不同URL（如使用$router.push）。而$route则是当前激活路由的表示，它提供了关于当前路由的详细信息，如name、path、query和params。 2、一个.vue文件由三部分组成 - `<template>`：HTML模板，定义了组件的结构和内容。 - `<script>`：JavaScript代码，用于定义组件的逻辑，包括数据、方法和组件选项。 - `<style>`：CSS样式，用于组件内部的样式定义，使用`scoped`属性可以实现样式隔离。 3、scoped作用与原理 作用：`scoped`用于限制组件内部的CSS样式只对当前组件生效，避免样式冲突。 原理：Vue在编译时，会给`scoped`内的CSS选择器添加一个唯一的标识，通常是`v-data-xxxxx`，利用这个标识提高选择器权重，确保样式仅作用于当前组件。 4、组件通信的方式 - `props`：父组件向子组件传递数据。 - `$emit`：子组件通过事件向父组件发送信息。 - `ref`：直接引用组件实例进行通信。 - `EventBus`（事件总线）：创建一个全局事件中心进行通信。 - `$parent`/$`root`：通过层级关系进行通信。 - `attrs`与`listeners`：用于接收非prop的属性和事件。 - `Provide`与`Inject`：提供者/注入器，允许祖先组件向子孙组件注入数据。 - Vuex：状态管理库，全局管理应用状态。 5、data属性为什么是函数 Vue组件的data必须是一个函数，因为每个组件实例需要有自己的独立数据副本，避免多个组件共享同一数据导致数据污染。函数返回的数据对象在每个实例中都是独一无二的。 6、Vue生命周期分为五个阶段 - 初始化阶段：beforeCreate、created - 挂载阶段：beforeMount、mounted - 更新阶段：beforeUpdate、updated - 销毁阶段：beforeDestroy、destroyed 7、axios的请求方式 axios支持GET、POST、PUT、DELETE、HEAD、OPTIONS等HTTP请求方法。 8、$nextTick的作用 $nextTick用于在下次DOM更新循环结束之后执行延迟回调，常用于在数据改变后等待DOM更新。 9、实现组件缓存 Vue中可以使用`keep-alive`组件来实现组件的缓存，它会将组件的状态保存下来，再次进入时无需重新渲染。 10、MVVM与MVC的区别 MVVM模式（Model-View-ViewModel）与MVC模式（Model-View-Controller）的主要区别在于，MVVM强调双向绑定，ViewModel作为数据和视图的桥梁，而MVC更注重控制器对模型和视图的控制。 11、Vue常用修饰符 常见的有`.prevent`阻止默认行为，`.stop`阻止事件冒泡，`.capture`捕获模式，`.once`事件只触发一次，`.self`只在当前元素上触发事件等。 12、避免v-for和v-if一起使用 v-for和v-if同时使用会导致性能下降，应优先使用计算属性或条件性类名替代。 13、Vue中Key值作用 Key值主要用于Vue识别元素的身份，优化DOM复用，尤其是在列表渲染时，可以更高效地更新和定位DOM元素。 14、Vue中数组不更新的情况 Vue无法检测到数组中元素的添加、删除或位置改变，除非使用变异方法（如push、pop、shift、unshift、splice、sort、reverse）。若需监听这些变化，需使用Vue.set或数组的变异方法。 15、计算属性与侦听器的区别 计算属性是基于其依赖进行缓存的，只有当依赖改变时才重新计算；侦听器是监听数据对象的变化，一旦数据变化，就会执行相应的回调函数。 16、vue组件传值 通过props从父组件向子组件传递数据，或者使用`v-bind`简写:`:`进行动态绑定。 17、vue中解决跨域做法 Vue应用中，通常使用`proxyTable`配置代理解决开发环境的跨域问题，生产环境中则需要后端设置CORS策略或使用JSONP等技术。