13道前端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.介紹下什麼是
11.watch能監聽到數組的pop行為嗎
12.watch如何實現深度監聽
13. vue中如何解決頁面不重新渲染問題     
（學習影片分享：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是根據依賴的值衍生出一個新的值，並且依賴的值可以有多個，只有當被依賴的值當改變發生時，才會重新去執行計算

【相關建議：

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

父元件能夠監聽到子元件的生命週期，透過@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()方法可重新渲染页面

更多编程相关知识，请访问：编程视频！！

以上是13道前端vue面試題分享（附答案解析）的詳細內容。更多資訊請關注PHP中文網其他相關文章！