這篇文章要跟大家分享一些前端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
}
} />登入後複製
注意：這裡透過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中文網其他相關文章！
