本篇文章給大家分享一些前端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.介紹下什么是
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標簽中傳遞參數(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ù)依賴的值衍生出一個新的值，并且依賴的值可以有多個厢岂，只有當被依賴的值發(fā)生改變時光督，才會重新去執(zhí)行計算
【相關(guān)推薦：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中父組件能監(jiān)聽到子組件的生命周期嗎
父組件能夠監(jiān)聽到子組件的生命周期船老，通過@hook:進行監(jiān)聽代碼如下：
// 這里是父組件
<template>
<child
@hook:mounted="getChildMounted"
/>
</template>
<script>
method: {
getChildMounted () {
// 這里可以獲取到子組件mounted的信息
}
}
</script>
9咖熟、vue中的事件修飾符主要有哪些？分別是什么作用
.stop: 阻止事件冒泡
.native: 綁定原生事件
.once: 事件只執(zhí)行一次
.self:將事件綁定在自身身上努隙，相當于阻止事件冒泡
.prevent: 阻止默認事件
.caption: 用于事件捕獲
10球恤、介紹下什么是keep-alive
keep-alive是用于做組件緩存的，只會執(zhí)行一次荸镊，不會被銷毀咽斧。被keep-alive包裹的組件，沒有create和beforeDestroyed等方法躬存，但是有activated和deactivated方法张惹。
11、watch能監(jiān)聽到數(shù)組的pop行為嗎
對于有返回值的數(shù)據(jù)岭洲，watch就能監(jiān)聽到宛逗，比如數(shù)組的pop，push, unshift,map等行為盾剩。
12雷激、watch如何實現(xiàn)深度監(jiān)聽
watch: {
obj: {
handler: function(val) {
},
deep: true // 深度監(jiān)聽
}
}
13、vue中如何解決頁面不重新渲染問題
(1).修改對象屬性后頁面未重新渲染可以使用 this.$set(對象名稱, '屬性名', '屬性值') (2).使用this.$forceUpdate()方法可重新渲染頁面
更多編程相關(guān)知識告私，請訪問：編程視頻Ｊ合尽！
