前端vue面試題有哪些

小編給大家分享一下前端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是根據依賴的值衍生出一個新的值，并且依賴的值可以有多個，只有當被依賴的值發生改變時，才會重新去執行計算

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中父組件能監聽到子組件的生命周期嗎

父組件能夠監聽到子組件的生命周期，通過@hook:進行監聽代碼如下：

// 這里是父組件
<template>
	<child
	@hook:mounted="getChildMounted"
	/>
</template>
<script>
method: {
	getChildMounted () {
		// 這里可以獲取到子組件mounted的信息
	}
}
</script>

9、vue中的事件修飾符主要有哪些？分別是什么作用

.stop: 阻止事件冒泡
.native: 綁定原生事件
.once: 事件只執行一次
.self:將事件綁定在自身身上，相當于阻止事件冒泡
.prevent: 阻止默認事件
.caption: 用于事件捕獲

10、介紹下什么是keep-alive

keep-alive是用于做組件緩存的，只會執行一次，不會被銷毀。被keep-alive包裹的組件，沒有create和beforeDestroyed等方法，但是有activated和deactivated方法。

11、watch能監聽到數組的pop行為嗎

對于有返回值的數據，watch就能監聽到，比如數組的pop，push, unshift,map等行為。

12、watch如何實現深度監聽

watch: {
	obj: {
		handler: function(val) {
		},
		deep: true // 深度監聽
	}
}

13、vue中如何解決頁面不重新渲染問題

(1).修改對象屬性后頁面未重新渲染可以使用 this.$set(對象名稱, '屬性名', '屬性值') (2).使用this.$forceUpdate()方法可重新渲染頁面

以上是“前端vue面試題有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！