2025 VUE常见面试题

hmildj

已于 2025-03-31 15:49:02 修改

阅读量2.6k

点赞数 32

CC 4.0 BY-SA版权

文章标签： vue.js 面试前端

于 2025-03-31 15:39:31 首次发布

本文链接：https://blog.csdn.net/qq_38332086/article/details/146840075

前言

总结一些VUE面试的基础知识，共同学习

1.什么是Vue？

答案：Vue.js（通常简称为Vue）是一个用于构建用户界面的‌渐进式JavaScript框架，Vue 3是Vue.js框架的最新版本，它引入了许多改进和优化，包括性能提升、更好的类型支持、组合API等。

2.MVVM模式是什么？Vue如何体现这一模式？‌

答案：MVVM将视图（View）与数据（Model）通过ViewModel层解耦，
Vue的v-model指令实现双向绑定，
ViewModel（即Vue实例）负责同步View和Model的数

3.父组件向子组件传递数据的方式？‌

答案：通过props属性传递，子组件用props选项接收‌15。

‌## 4.子组件如何向父组件传递事件？‌
答案：使用$emit触发自定义事件，父组件通过v-on监听‌15。

‌## 5.v-show和v-if的区别？‌
答案：v-show通过CSS的display属性切换显示，初始渲染成本高但切换性能好；
v-if动态添加/移除DOM元素，适用于条件不频繁变化的场景‌。
‌

6.ref和reactive的区别是什么？

答案：ref：用于包装基本类型（数字、字符串等），用于创建一个响应式的基本类型或对象引用。
reactive:用于包装对象/数组，用于创建一个响应式的对象。

7.计算属性compute，watch 区别

答案：computed适合于计算依赖多个数据属性的复杂属性值，必须有返回值，只在相关响应式依赖发生改变时才会重新求值，不支持异步。
watch适合于监听数据属性，并在数据变化时执行操作，支持异步，不支持缓存。
computed在初始化时就会执行一次，而watch初始化时默认不会执行，如果想让它执行，可以设置它的immediate属性为true；
computed相当于创建了一个新的响应式属性，而watch相当于监听原有的响应式属性，然后执行回调；
watch选项中的函数有两个参数，第一个是最新的值，第二个参数是输入之前的值，顺序是新值，旧值。适用于一个数据改变影响多个数据的情况

8.router和route的区别

答案：可以把router视为全局的路由对象，操作路由一些方法时，使用router；
把route视为当前活跃的路由对象，当访问当前路由信息的时候，使用route；

9.vue-router有哪些路由模式

答案：hash、history、Abstract
‌Hash 模式‌（默认模式）
‌URL 特征‌：使用#符号分割路径。
‌实现原理‌：通过监听hashchange事件处理路由变化，不会触发页面重新加载‌。
‌优点‌：兼容所有浏览器（包括 IE8+），无需服务器特殊配置‌。
‌缺点‌：URL中包含#，美观性较差，SEO不友好。

‌History 模式‌
‌URL 特征‌：无#路径更简洁。
‌实现原理‌：基于HTML5 History API（pushState/replaceState和popstate事件）动态更新URL‌。
‌优点‌：URL美观，SEO友好‌。
‌缺点‌：需要服务器端配置支持（如Nginx或Apache重定向规则），否则直接访问子路径会返回404‌。

‌Abstract 模式‌
‌适用场景‌：非浏览器环境（如Node.js服务端渲染、移动端应用）或老旧浏览器（如 IE8/9）‌。
‌特点‌：不依赖URL，路由信息通过JavaScript变量维护，无浏览器历史记录‌

备注：SEO（Search Engine Optimization，搜索引擎优化）‌ 是通过优化网站内容、结构和技术，提升网站在搜索引擎（如Google、百度）中的自然排名，从而获取更多免费流量的方法。

10.v-if和v-for是什么，谁的优先级更高

答案：v-if:指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-for:指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组或者对象，而item则是被迭代的数组元素的别名。
在Vue2中，v-for的优先级要高于v-if，但是在Vue3中，v-for的优先级要低于v-if。

11.v-for的key是做什么的

答案：标识当前VNode节点，在进行更新操作时会将更新前后两个key相同的元素视作同一元素，进行对比，然后进行相应的更新操作。
如果没有key，就只能按顺序进行对比

12.为什么不建议使用index作为v-for的key

答案：数据变化时，index对应的新老对象可能发生变化。

13.如何实现组件间样式隔离？‌

答案：在

14.什么是Composition API？

答案：Composition API是Vue 3中新引入的API设计模式，它允许开发者更灵活地组织和管理组件逻辑。

15.Composition API与Options API有什么区别？

答案：Composition API提供了更好的逻辑复用和代码组织方式，而Options API则将逻辑分散在组件的各个选项中。
Composition API使用函数来组织逻辑，而Options API则通过对象的选项来定义逻辑。

16.Vuex有哪几种属性？

答案：state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步！
actions：像一个装饰器，包裹 mutations，使之可以异步。
modules：模块化 Vuex。

17.keep-alive是什么？

答案：keep-alive是vue中的内置组件，用于在组件切换过程中保留组件的状态或避免重新渲染DOM。‌
keep-alive能够在组件切换时缓存不活动的组件实例，而不是销毁它们，
从而保留组件的状态和数据，避免重复渲染DOM，提高应用性能‌。
keep-alive可以包裹动态组件或路由组件。它提供了一些属性来控制缓存行为：
‌include‌：字符串或正则表达式，只有名称匹配的组件会被缓存。
‌exclude‌：字符串或正则表达式，任何名称匹配的组件都不会被缓存。
‌max‌：数字，最多可以缓存多少组件实例‌

18.常见Vue指令有哪些？每个指令的作用是什么？

答案：1、v-bind：动态绑定属性或样式。可以简写为:。
2、v-model：双向数据绑定，常用于表单元素。
3、v-for：循环渲染列表。
4、v-if、v-else-if、v-else：条件渲染，根据条件动态显示元素。
5、v-show：根据条件展示或隐藏元素（仅通过 CSS 控制）。
6、v-on：事件绑定，简写为@。
7、v-slot：具名插槽，用于分发和渲染子组件内容。

19.Vue的核心特性

答案：响应式数据绑定：通过观察者模式，实现数据与视图的双向绑定。
组件化：提供了可以复用的组件结构，便于管理和维护代码。
指令：提供了如 v-bind, v-if, v-for 等指令来操作 DOM。
单文件组件：支持 .vue 格式的文件，将模板、脚本和样式分离，便于开发。

20.v-model双向绑定的原理

答案：v-model用于简化表单元素和数据之间的双向绑定。
实际上是将v-bind:value和@input绑定的细节封装起来。

21.iframe内外部交互的方式

答案：（1）从vue到iframe的信息传递：
使用window.postMessage，：在Vue组件中使用window.postMessage‘发送消息，iframe中通过监听‘message’事件接收消息。
Vue组件内嵌iframe：
将iframe作为vue组件的一部分，通过props或其他方式将数据传递给iframe。
通过eventbus，使用 $e mi t 触发事件， i f r am e 中通过$ on监听事件。
（2）从iframe到Vue的信息传递：
使用window.postMessage，在iframe中使用window.parent.postMessage发送消息。在vue中通过监听message接收。
window.addEventListener:在vue应用中通过 window.addEventListener’监听全局事件。在iframe中通过 window.top.dispatchEvent•触发全局事件，从而与Vue通信。

‌22.Vue组件的生命周期有哪些？‌

答案：主要分为8个阶段：
beforeCreate → created（数据初始化）
beforeMount → mounted（DOM挂载）
beforeUpdate → updated（数据更新）
beforeDestroy → destroyed（实例销毁）
执行顺序为初始化→挂载→更新→销毁‌

23.Vue 子组件和父组件生命周期钩子函数执行顺序

答案：组件的调用顺序都是先父后子，
渲染完成的顺序是先子后父，
组件的销毁操作是先父后子，
销毁完成的顺序是先子后父。
加载渲染过程：
1.父组件 beforeCreate
2.父组件 created
3.父组件 beforeMount
4.子组件 beforeCreate
5.子组件 created
6.子组件 beforeMount
7.子组件mounted
8.父组件 mounted
更新过程：
1.父组件 beforeUpdate
2.子组件 beforeUpdate
3.子组件 updated
4.父组件 updated
销毁过程：
1.父组件 beforeDestroy
2.子组件 beforeDestroy
3.子组件 destroyed
4.父组件 destoryed
created：已创建 //已创建，在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
Mounted：渲染完成 //已挂载，在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些操作。
Updated 数据更新 //在实例更新完成后被调用，此时实例的数据已经重新渲染到DOM上。可以在这个阶段对DOM进行操作，但要避免无限循环的更新。
beforeDestroyed ：即将销毁 //即将执行销毁过程，一般在此阶段停止定时器、取消eventbus等操作

24.Vuex页面刷新数据如何解决

答案：方法1：使用Localstorage sessionStorage 或cookie
实际使用时当vuex值变化时，F5刷新页面，vuex数据重置为初始状态，所以还是要用到localStorage。
方法2：插件vuex-persistedstate
vuex-persistedstate默认持久化所有state，可以指定需要持久化的state。