2024年Vue面试题汇总
流程图如下：
vue核心知识——语法篇
1.请问 v-if 和 v-show 有什么区别？
相同点： 两者都是在判断DOM节点是否要显示。
不同点：
a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；
c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；
2、vue常用的修饰符
a、按键修饰符
如：.delete（捕获“删除”和”退格“键） 用法上和事件修饰符一样，挂载在v-on:后面，语法：v-on:keyup.xxx=’yyy’
b、系统修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器
-
.ctrl
-
.alt
-
.shift
-
.meta
c、鼠标按钮修饰符
-
.left
-
.right
-
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。如： 鼠标滚轮单击触发 Click默认是鼠标左键单击
d、其他修饰符
- .lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ，我们可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：
- .number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 .number修饰符：
这通常很有用，因为即使在type="number"时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析，则会返回原始的值。
- .trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
同样前面都有空格加上.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. p a r e n t . 属性 / t h i s . parent.属性/this. parent.属性/this.parent.方法。
（3）子组件给父组件传值：
一、使用ref属性
1.父组件调用子组件时绑定属性ref
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响应路由参数的变化
-
(1)用watch 检测
-
(2)组件内导航钩子函数
5. vue-router 传参
(1)使用Params:
-
只能使用name，不能使用path
-
参数会显示在路径上，刷新不会被清空
（2）使用Query：
-
参数会显示在路径上，刷新不会被清空
-
name 可以使用path路径
vue核心知识——vuex
不用Vuex会带来什么问题？
一、可维护性会下降，你要想修改数据，你得维护三个地方
二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。
1.vuex有哪几种属性？
有五种，分别是 State、 Getter、Mutation 、Action、 Module。