站长资讯网本篇文章给大家分享一些前端vue面试题。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
vue面试题
1.vue-router是怎么传递参数的
2.v-if和v-for一起使用的弊端以及解决办法
3.beforeDestroyed里面一般进行什么操作
4.vue同级组件间怎么传值
5.vue中父组件如何获取子组件的属性和方法
6.watch和computed的区别
7.vue父组件和子组件生命周期的顺序
8.vue中父组件能监听到子组件的生命周期吗
9.vue中的事件修饰符主要有哪些？分别是什么作用
10.介绍下什么是<keep-alive />
11.watch能监听到数组的pop行为吗
12.watch如何实现深度监听
13.vue中如何解决页面不重新渲染问题
vue面试题解析
1、vue-router有两种传参方式
(1)通过在router.js文件中配置path的地方动态传递参数 eg: path: '/detail/:id' 然后在组件内通过this.$route.params.id即可获取
(2).在router-link标签中传递参数
<router-link :to={ params: { x: 1 } } />
也通过this.$route.params获取
注意：这里通过router-link传递参数的方式是隐式传参
2、v-if和v-for一起使用的弊端以及解决办法
由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。
解决办法：在v-for的外层或内层包裹一个元素来使用v-if
3、beforeDestroy里面一般进行什么操作
beforedestoryed是组件销毁之前执行的一个生命周期，在这个生命周期里，我们可以进行回调函数或定时器的清除，不用的dom元素的清除等
4、vue同级组件间怎么传值
1.如果是兄弟组件，可通过父元素作为中间组件进行传值 2.通过创建一个bus，进行传值
// 创建一个文件，定义bus中间件，并导出 const bus = new Vue() // 在一个组件中发送事件 bus.$emit('事件名称', 传递的参数) // 在另一个组件中监听事件 bus.$on('事件名称', 得到传过来的参数)
5、vue中父组件如何获取子组件的属性和方法
vue中通过在子组件上定义ref属性来获取子组件的属性和方法，代码如下：
// 这里是父组件 <templete> <child ref="child"/> </templete> <script> method: { getChild () { this.$refs.child.属性名（方法名） } } </script>
6、watch和computed的区别
watch作用通常是由一个值影响多个值的改变并且能监听到这个值变化时，会去执行一个回调函数，此时我们可以在这个回调函数中做一些逻辑处理
computed是根据依赖的值衍生出一个新的值，并且依赖的值可以有多个，只有当被依赖的值发生改变时，才会重新去执行计算
【
