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

vue面試題

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

vue面試題解析

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

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

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

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

也通過(guò)this.$route.params獲取

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

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

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

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

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

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

4、vue同級(jí)組件間怎么傳值

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

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

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

vue中通過(guò)在子組件上定義ref屬性來(lái)獲取子組件的屬性和方法，代碼如下：

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

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

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

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

【