2024年Vue面试题汇总，新鲜出炉的前端面试真题集锦我给你们整理出来了

• .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 .number修饰符：

这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值。

• .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<inputv-model.trim=“msg”>

同样前面都有空格加上.trim后 将前后空格都去掉了。

3、v-on可以监听多个方法吗？

可以，例如：@click = “fn(),fn2()”     会依次执行方法

4、vue中 key 值的作用

使用key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

否则vue只会替换其内部属性而不会触发过渡效果。

5.Vue 组件中 data 为什么必须是函数？

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

6、v-for 与 v-if 的优先级

v-for的优先级比v-if高。

7.说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)

v-for(把数据遍历出来)

v-bind(绑定属性)

v-model(实现双向绑定)

vue核心知识——组件篇

1.vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法。

2.vue中父组件调用子组件的方法

父组件利用ref属性操作子组件方法。

父：

子：

method: {

test() {

alert(1)

}

}

在父组件里调用test即 this.$refs.childMethod.test()

3.vue组件之间传值

(1)父组件给子组件传值：

1.父组件调用子组件的时候动态绑定属性

2.子组件定义props接收动态绑定的属性props: ['dataList']

3.子组件使用数据

(2)子组件主动获取父子间的属性和方法：

在子组件中使用this.$parent.属性/this.$parent.方法。

（3）子组件给父组件传值：

一、使用ref属性

1.父组件调用子组件时绑定属性ref

<parent :ref='parent'></parent>

2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法

二、使用$emit方法

1.子组件调用this.$emit('方法名‘,传值)

2.父组件通过子组件绑定的'方法名'获取传值。

（4）vue页面级组件之间传值

1.使用vue-router通过跳转链接带参数传参。

2.使用本地缓存localStorge。

3.使用vuex数据管理传值。

（5）说说vue的动态组件。

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

主要考查面试这 component的 is属性。

（6）keep-alive内置组件的作用

可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

(7)递归组件的用法

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

vue核心知识——路由

1.怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{

path: ‘/details/:id’

name: ‘Details’

components: Details

}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

this.$route.params.id

2.vue-router有哪几种路由守卫?

路由守卫为：

全局守卫：beforeEach

后置守卫：afterEach

全局解析守卫：beforeResolve

路由独享守卫：beforeEnter

3.$route和 $router的区别是什么？

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

4.vue-router响应路由参数的变化

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-vyVM3c9G-1712674884454)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-WxD7v707-1712674884455)]

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-0LdO7n1a-1712674884455)]