vue面试题整理（1）

最新推荐文章于 2025-05-08 15:57:49 发布

Sobremesa1

最新推荐文章于 2025-05-08 15:57:49 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue 前端面试

本文链接：https://blog.youkuaiyun.com/Issiyu/article/details/112351632

前端专栏收录该内容

1 篇文章

订阅专栏

本文整理了Vue面试中常见的问题，涵盖了vuex的用途、Vue的生命周期、MVVM概念、路由使用步骤、事件修饰符、数据绑定原理、组件生命周期钩子函数等内容。详细解答了Vuex如何在不同场景下使用，Vue的创建、更新、销毁阶段，以及Vue如何实现双向数据绑定。还讨论了Vue的路由模式、优化策略和组件通信方法。此外，还涉及到Vue CLI的自定义指令和keep-alive组件的理解。文章最后简要回答了一些关于Vue的一句话面试题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是vuex？在那种场景下使用？

vuex 是全局状态管理工具，它有以下几个核心部分组成：

state:存储数据；

mutations:更新数据的方法；

actions:调用mutations方法，更新state数据；

getters:对state中的数据进行预处理；

只用来读取的状态集中放在store中；

改变状态的方式是提交mutations，这是个同步的事物；

异步逻辑应该封装在action中.

在main.js引入store，注入。新建了一个目录store，….. export 。

应用场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

action:actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。

view 层通过 store.dispath 来分发 action。

mutations:mutations定义的方法动态修改Vuex 的 store 中的状态或数据。

getters:类似vue的计算属性，主要用来过滤一些数据。

应用场景: 购物车商品总价的计算等...

state:Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

vue的路由使用步骤？

1.下载vue-router路由模块；

2.创建路由对象；

3.配置路由规则；

4.将路由对象注册为vue实例对象的成员属性

对于MVVM的理解？

M（数据层） V（视图层） VM（view-model）视图模型层）用来连接（数据层）（视图层）

MVVM 是 Model-View-ViewModel 的缩写。

Model 代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

vue的生命周期：

beforeCreate: 进行数据和方法的初始化；

created: 已经完成数据和方法的初始化；

beforeMount: 开始渲染dom

mounted:可以渲染dom

beforeUpdate: data中的数据即将被更新；

updated: data中的数据更新完毕；

beforeDestroy: 实例即将销毁；

destroyed:实例已被销毁；

1. 初始化阶段 :

beforeCreate（创建前）在数据观测和初始化事件还未开始

created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

2. 数据更新阶段 :

beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

3. 组件销毁阶段 :

beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

请列举出3个Vue中常用的生命周期钩子函数?

1.created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

2.mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted被调用时 vm.$el 也在文档内。

3.activated: keep-alive组件激活时调用

vue的指令

v-if指令判断是否隐藏

v-show指令

v-else指令

v-for指令数据循环出来

v-bind:class指令绑定一个属性

v-on指令

v-model指令：实现双向绑定它是一个语法糖：真实写法是：value=" msg "@input 注（：是v-bind，@是v-on）

v-text读取文本，不能读取html标签

v-html 能读取html标签

路由跳转

编程式（ js跳转）this.$router.push()

声明式（标签跳转）<router-link to=" "></router-link>

vue双向数据绑定原理：

vue是结合数据劫持和发布订阅者模式来实现双向数据绑定的,当要读取数据的时候会自动触发方法，并且会被赋值。

MDN => Object.defineProperty（） => 兼容IE9+

MDN => addEventListener => 兼容IE9+

vue实现数据双向绑定主要是: 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

codepen原理演示 :

<body> 
    <div id="app"> 
        <input type="text" id="txt"> 
        <p id="show"></p> 
    </div> 
</body> 
<script type="text/javascript"> 
    var obj = {} 
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj;
        }, 
        set: function (newValue) {
            document.getElementById('txt').value = newValue;       
            document.getElementById('show').innerHTML = newValue;
        }
    }) 
    document.addEventListener('keyup', function (e) { 
    obj.txt = e.target.value;
    }) 
</script>

vue创建组件的时候data中为什么会被return出一个对象？

可以保证组件的每一次调用都是创建一个新对象，组件之间不会产生影响；

vue路由的几种模式：

两种：hash（默认） history 可以用model属性切换路由模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

如何去解决history模式下刷新报404的弊端呢

这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html），前后端联手，齐心协力做好“挂羊头卖狗肉”的完美特效

总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应

history模式下，build之后本地 index.html 打开是无效的。

hash模式下，build之后本地 index.html 打开正常！

大牛回答：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人员配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。

怎么样定义vue-router的动态路由：

比如 path:中拼接参数， this.$route.params.id 获取；

vue-router解决的问题：

监听URL的变化，并在变化前后执行相应的逻辑

不同的URL对应不同的组件

提供多种方式改变URL的API(URL的改变不能导致浏览器刷新)

vue中的事件修饰符：

.prevent() 阻止默认事件；

.once() 只执行一次；

.stop() 阻止冒泡；

vue如何优化页面加载：

使用cdn,不要打包一些公共的文件和组件库

什么是路由懒加载：

路由懒加载是通过异步的方式来加载对应的路由组件，提高页面相应速度

按需加载会在页面第一次请求的时候，把相关路由组件块的js添加上；非按需加载则会把所有的路由组件块的js包打在一起。当业务包很大的时候建议用路由的按需加载（懒加载）

vue中有哪些内置组件：

component slot transtion fliters

ssr是什么？

服务端渲染

什么是SPA？

SPA是单页面应用程序，vue react angular 都是,整个项目只有一个页面；局部刷新而来；

Vue组件间的参数传递 :

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;

子组件传给父组件：$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

vue路由的钩子函数:

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

vue-cli如何新增自定义指令？

1.创建局部指令:

var app = new Vue({ 
    el: '#app', 
    data: { }, // 创建指令(可以多个) 
    directives: { // 指令名称 
        dir1: { 
            inserted(el) { 
                // 指令中第一个参数是当前使用指令的DOM 
                console.log(el); 
                console.log(arguments); 
                // 对DOM进行操作 
                el.style.width = '200px'; 
                el.style.height = '200px'; 
                el.style.background = '#000'; 
            }
        } 
    } 
})

2.全局指令:

Vue.directive('dir2', { 
    inserted(el) { 
        console.log(el); 
    } 
})

3.指令的使用:

<div id="app"> 
    <div v-dir1></div> 
    <div v-dir2></div> 
</div>

对keep-alive 的了解？

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法:

<keep-alive include='include_components' exclude='exclude_components'> 
    <component> <!-- 该组件是否缓存取决于include和exclude属性 --> </component> 
</keep-alive>

注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了 .

属性有：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉

举例：

比如有一个列表页和详情页，用户经常执行打开详情—>返回列表—>打开详情。。。这种频率很高的页面，就可以对列表页组件使用<keep-alive>进行缓存，用户每次返回列表的时候，都是从缓存中快速渲染，而不是重新渲染，大大提高了性能。

参数解释:

include - 字符串或正则表达式，只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存

include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

使用示例:

<keep-alive include="a,b"> <component></component> </keep-alive>  <keep-alive :include="/a|b/"> <component></component> </keep-alive>  <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>

vue如何自定义一个过滤器？

过滤器的作用: 进一步对相似数据做统一(格式化)处理的方法

应用场景: 日期数据的格式化处理, 筛选评价等...

日期格式库: moment.js, date-fns.js

一句话就能回答的面试题:

1.css只在当前组件起作用

答：在style标签中写入scoped即可例如：<style scoped></style>

2.v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3.route和router的区别

答：route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4.vue.js的两个核心是什么？

答：数据驱动、组件系统

5.vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？

答：可以

8.vue中 key 值的作用？

答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9.什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。