本篇文章給大家分享一些前端vue面試題。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
vue面試題
1.vue-router是怎么傳遞參數(shù)的
2.v-if和v-for一起使用的弊端以及解決辦法
3.beforeDestroyed里面一般進行什么操作
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如何實現(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)層包裹一個元素來使用v-if
3、beforeDestroy里面一般進行什么操作
beforedestoryed是組件銷毀之前執(zhí)行的一個生命周期,在這個生命周期里,我們可以進行回調(diào)函數(shù)或定時器的清除,不用的dom元素的清除等
4、vue同級組件間怎么傳值
1.如果是兄弟組件,可通過父元素作為中間組件進行傳值 2.通過創(chuàng)建一個bus,進行傳值
// 創(chuàng)建一個文件,定義bus中間件,并導(dǎo)出 const bus = new Vue() // 在一個組件中發(fā)送事件 bus.$emit('事件名稱', 傳遞的參數(shù)) // 在另一個組件中監(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作用通常是由一個值影響多個值的改變并且能監(jiān)聽到這個值變化時,會去執(zhí)行一個回調(diào)函數(shù),此時我們可以在這個回調(diào)函數(shù)中做一些邏輯處理
computed是根據(jù)依賴的值衍生出一個新的值,并且依賴的值可以有多個,只有當(dāng)被依賴的值發(fā)生改變時,才會重新去執(zhí)行計算
【