本篇文章給大家分享一些前端vue面試題。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對大家有所幫助。

vue面試題

1.vue-router是怎么傳遞參數(shù)的
2.v-if和v-for一起使用的弊端以及解決辦法
3.beforeDestroyed里面一般進(jìn)行什么操作
4.vue同級組件間怎么傳值
5.vue中父組件如何獲取子組件的屬性和方法
6.watch和computed的區(qū)別
7.vue父組件和子組件生命周期的順序
8.vue中父組件能監(jiān)聽到子組件的生命周期嗎
9.vue中的事件修飾符主要有哪些？分別是什么作用
10.介紹下什么是<keep-alive />
11.watch能監(jiān)聽到數(shù)組的pop行為嗎
12.watch如何實(shí)現(xiàn)深度監(jiān)聽
13.vue中如何解決頁面不重新渲染問題

vue面試題解析

1、vue-router有兩種傳參方式

(1)通過在router.js文件中配置path的地方動態(tài)傳遞參數(shù) eg: path: '/detail/:id' 然后在組件內(nèi)通過this.$route.params.id即可獲取

(2).在router-link標(biāo)簽中傳遞參數(shù)

<router-link :to={ params: { 	x: 1 	} } />

也通過this.$route.params獲取

注意：這里通過router-link傳遞參數(shù)的方式是隱式傳參

2、v-if和v-for一起使用的弊端以及解決辦法

由于v-for的優(yōu)先級比v-if高，所以導(dǎo)致每循環(huán)一次就會去v-if一次，而v-if是通過創(chuàng)建和銷毀dom元素來控制元素的顯示與隱藏，所以就會不停的去創(chuàng)建和銷毀元素，造成頁面卡頓，性能下降。

解決辦法：在v-for的外層或內(nèi)層包裹一個(gè)元素來使用v-if

3、beforeDestroy里面一般進(jìn)行什么操作

beforedestoryed是組件銷毀之前執(zhí)行的一個(gè)生命周期，在這個(gè)生命周期里，我們可以進(jìn)行回調(diào)函數(shù)或定時(shí)器的清除，不用的dom元素的清除等

4、vue同級組件間怎么傳值

1.如果是兄弟組件，可通過父元素作為中間組件進(jìn)行傳值 2.通過創(chuàng)建一個(gè)bus，進(jìn)行傳值

// 創(chuàng)建一個(gè)文件，定義bus中間件，并導(dǎo)出 const bus = new Vue() // 在一個(gè)組件中發(fā)送事件 bus.$emit('事件名稱', 傳遞的參數(shù)) // 在另一個(gè)組件中監(jiān)聽事件 bus.$on('事件名稱', 得到傳過來的參數(shù))

5、vue中父組件如何獲取子組件的屬性和方法

vue中通過在子組件上定義ref屬性來獲取子組件的屬性和方法，代碼如下：

// 這里是父組件 <templete> 	<child ref="child"/> </templete> <script> method: { 	getChild () { 		this.$refs.child.屬性名（方法名） 	} } </script>

6、watch和computed的區(qū)別

watch作用通常是由一個(gè)值影響多個(gè)值的改變并且能監(jiān)聽到這個(gè)值變化時(shí)，會去執(zhí)行一個(gè)回調(diào)函數(shù)，此時(shí)我們可以在這個(gè)回調(diào)函數(shù)中做一些邏輯處理

computed是根據(jù)依賴的值衍生出一個(gè)新的值，并且依賴的值可以有多個(gè)，只有當(dāng)被依賴的值發(fā)生改變時(shí)，才會重新去執(zhí)行計(jì)算

【