站長資訊網本篇文章給大家分享一些前端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是根據依賴的值衍生出一個新的值，并且依賴的值可以有多個，只有當被依賴的值發生改變時，才會重新去執行計算
【
