13道前端vue面试题分享（附答案解析）-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

本篇文章给大家分享一些前端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是根据依赖的值衍生出一个新的值，并且依赖的值可以有多个，只有当被依赖的值发生改变时，才会重新去执行计算

【相关推荐：vue.js教程】

7、vue父组件和子组件生命周期的顺序

1）、渲染过程顺序：

父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()

2）、更新过程顺序：

父组件更新过程：
父组件beforeUpdate() -> 父组件updated()

子组件更新过程：
父组件beforeUpdate() -> 子组件beforeUpdate() -> 子组件updated() -> 父组件updated()

3）、销毁过程
父组件beforeDestroy() -> 子组件beforeDestroy() -> 子组件destroyed() -> 父组件destroyed()

8、vue中父组件能监听到子组件的生命周期吗

父组件能够监听到子组件的生命周期，通过@hook:进行监听代码如下：

// 这里是父组件
<template>
    <child
    @hook:mounted="getChildMounted"
    />
</template>
<script>
method: {
    getChildMounted () {
        // 这里可以获取到子组件mounted的信息
    }
}
</script>

9、vue中的事件修饰符主要有哪些？分别是什么作用

.stop: 阻止事件冒泡
.native: 绑定原生事件
.once: 事件只执行一次
.self:将事件绑定在自身身上，相当于阻止事件冒泡
.prevent: 阻止默认事件
.caption: 用于事件捕获

10、介绍下什么是keep-alive

keep-alive是用于做组件缓存的，只会执行一次，不会被销毁。被keep-alive包裹的组件，没有create和beforeDestroyed等方法，但是有activated和deactivated方法。

11、watch能监听到数组的pop行为吗

对于有返回值的数据，watch就能监听到，比如数组的pop，push, unshift,map等行为。

12、watch如何实现深度监听

watch: {
    obj: {
        handler: function(val) {
        },
        deep: true // 深度监听
    }
}

13、vue中如何解决页面不重新渲染问题

(1).修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值') (2).使用this.$forceUpdate()方法可重新渲染页面

更多编程相关知识，请访问：编程视频！！

以上就是13道前端vue面试题分享（附答案解析）的详细内容，更多文章请关注木庄网络博客！

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 13道前端vue面试题分享（附答案解析）

vue面试题

vue面试题解析

相关推荐

评论