本篇文章給大家分享一些常見的前端vue面試題，有一定的參考價值，希望對大家有所幫助。
vue面試題
- vue.js的特點？
- vue常用指令
- vue的雙向數據綁定原理是什么?
- vue-router有哪幾種導航鉤子?
- active-class是哪個組件的屬性?嵌套路由怎么定義?
- scss是什么?在 vue.cli中的安裝使用步驟是?有哪幾大特性?
- sass是什么？如何在vue中安裝和使用？
- 請說下封裝 vue組件的過程?
- 請詳細說下你對vue生命周期的理解?
- 父子組件的生命周期順序
- watch和computed的區別
- computed 和 methods 的區別
- vue中如何解決頁面不重新渲染問題
- v-if和v-for一起使用的弊端以及它的解決辦法？
- v-show指令和v-if指令的區別是什么？
- 虛擬DOM，diff算法?
- 過濾器 (Filter)
- 常見的事件修飾符及其作用
- Vue 組件 data 為什么必須是函數 ?
- axios是什么
- 在 Vue. js開發環境下調用API接口，如何避免跨域
- 組件傳值方式有哪些？
- 如何讓CSS只在當前組件中起作用？
- keep-alive是什么？
- 如何在 Vue. js動態插入圖片
- vuex的核心概念
- vuex是什么？怎么使用？哪種功能場景使用它？
- vue中key值的作用
- 使用import時，webpack會對node_modules里的依賴做什么？
vue面試題解析
vue.js的特點？
- 易用： 簡單，易學，上手快
- 靈活： （漸進式）不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。
- 高效： 20kB min+gzip 運行大小；超快虛擬 DOM；最省心的優化
- 雙向綁定：開發效率高
- 基于組件的代碼共享
- Web項目工程化，增加可讀性、可維護性
vue常用指令
v-model 多用于表單元素實現雙向數據綁定（同angular中的ng-model）
v-bind 動態綁定 作用： 及時對頁面的數據進行更改
v-on:click 給標簽綁定函數，可以縮寫為@，例如綁定一個點擊函數 函數必須寫在methods里面
v-for 格式： v-for="字段名 in(of) 數組json" 循環數組或json(同angular中的ng-repeat)
v-show 顯示內容 （同angular中的ng-show）
v-hide 隱藏內容（同angular中的ng-hide）
v-if 顯示與隱藏 （dom元素的刪除添加 同angular中的ng-if 默認值為false）
v-else-if 必須和v-if連用
v-else 必須和v-if連用 不能單獨使用 否則報錯 模板編譯錯誤
v-text 解析文本
v-html 解析html標簽
v-bind:class 三種綁定方法 1、對象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、數組型 '[{red:"isred"},{blue:"isblue"}]'
v-once 進入頁面時 只渲染一次 不在進行渲染
v-cloak 防止閃爍
v-pre 把標簽內部的元素原位輸出
Vue的雙向數據綁定原理是什么?
是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。從而實現數據的雙向綁定
vue-router有哪幾種導航鉤子?
一.全局守衛
1.router.beforeEach((to,from,next) => {})
- 回調函數中的參數，to：進入到哪個路由去，from：從哪個路由離開，next：函數，決定是否展示你要看到的路由頁面。
- 如下例：main.js中設置全局守衛
在main.js中，有一個路由實例化對象router。在main.js中設置守衛已是全局守衛。
如下，判斷to.path當前將要進入的路徑是否為登錄或注冊，如果是就執行next()，展示當前界面。如果不是，就彈出alert，然后移至登錄界面。
這樣就可實現，用戶在未登錄狀態下，展示的一直是登錄界面。
router.beforeEach((to,from,next) => {
if(to.path == '/login' || to.path == '/home' || to.path == '/event'){
next();
}else {
alert('您還沒有登錄')
next('/login')
}
})
- 全局后置鉤子router.afterEach((to,from)=>{})
只有兩個參數，to：進入到哪個路由去，from：從哪個路由離。
如下，每次切換路由時，都會彈出alert，點擊確定后，展示當前頁面。
router.afterEach((to,from)=>{
alert("每次跳轉頁面都會彈出");
})
二.組件內的守衛
- 到達這個組件時，beforeRouteEnter:(to,from,next)=>{}
在Admin.vue文件中，點擊轉到admin路由時，執行beforeRouteEnter函數
to，from參數與上面使用方法一致。next回調函數略有不同。
如下例，data 組件內守衛有特殊情況，如果我們直接以
beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}進行訪問admin頁面，會發現alert輸出hello undefined。這是因為，現在訪問不到我們的data屬性，執行順序是不一致，這與的聲明周期有關。在執行完之前，data數據還未渲染。所以這里，next()會給一個對應的回調，幫助完成。
data(){
return{
name:"通過審核！"
}
},
beforeRouteEnter:(to,from,next)=>{
next(vm=>{
alert("恭喜你" + vm.name);
})
},
- 離開這個組件時，beforeRouteLeave:(to,from,next)=>{}
點擊其他組件時，判斷是否確認離開。確認執行next()；取消執行next(false)，留在當前頁面。
beforeRouteLeave:(to,from,next)=>{
if(confirm("確定離開此頁面嗎？") == true){
next();
}else{
next(false);
}
},
三.路由獨享的守衛
beforeEnter:(to,from,next)=>{}，用法與全局守衛一致。只是，將其寫進其中一個路由對象中，只在這個路由下起作用。
{
path: '/demo',
name: 'Demo',
component: Demo,beforeEnter:(to,from,next)=>{
alert("非登錄狀態，不能訪問頁面");
next('/login');
},
},
active-class是哪個組件的屬性?嵌套路由怎么定義?
active-class是vue-router模塊的router-link組件中的屬性，一般是用來做選中樣式的切換
一級路由里面使用children配置子路由，就是嵌套路由
scss是什么?在 vue.cli中的安裝使用步驟是?有哪幾大特性?
scsss是css預編譯；
使用步驟：
第一步：用npm下三個loader(sass-loader、css-loader、node-sass)；
第二步：在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss；
第三步：還是在同一個文件，配置一個module屬性；
第四步：然后在組件的style標簽加上lang屬性，例如：lang="scss"；
有哪幾大特性：
1、可以用變量，例如（$變量名稱=值）；
2、可以用混合器；
3、可以嵌套；
sass是什么？如何在vue中安裝和使用？
sass是一種CSS預編譯語言安裝和使用步驟如下。
- 用npm安裝加載程序（ sass-loader、 css-loader等加載程序)。
- 在 webpack.config.js中配置sass加載程序。
請說下封裝 vue組件的過程?
在components文件夾下建一個vue文件封裝組件
根據業務邏輯、需求寫寫UI 靜態樣式等 定義好props的屬性數據 子組件修改好數據之后，想把數據傳遞給父組件，可以使用emit()方法 定義插槽增加組件的可拓展性
- 全局組件的話就在main.js中引入、注冊 然后再單頁面使用即可
- 局部組件的話就在單頁面引入、注冊 在使用即可
請詳細說下你對vue生命周期的理解?
每個vue實例都有一個生命周期 一共分為八個階段
創建前后： beforeCreate/created 渲染前后： beforeMount/mounted
更新前后： beforeUpdate/updated 銷毀前后： beforeDestroy/destroyed
- 在created周期的時候 就可以訪問到this了 也可以調用異步的方法去獲取后臺的數據
- 在mounted周期的時候 就能夠訪問到DOM結構 對dom結構進行一些增刪改查的操作 因為在這個時候 dom結構已經渲染完成并掛載在vue實例上面了
- 當data變化時，會觸發beforeUpdate和updated方法
- 在執行destroy方法后，對data的改變不會再觸發周期函數，說明此時vue實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在
父子組件的生命周期順序
- 加載渲染過程：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted- 子組件更新過程：父beforeUpdate->子beforeUpdate->子updated->父updated
- 父組件更新過程：父beforeUpdate->父updated
- 銷毀過程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
watch和computed的區別
watch顧名思義，用于監聽數據變化，其中可以監聽的數據來源有三部分：props、data、computed內的數據；watch提供兩個參數（newValue，oldValue），第一個參數是新值，第二個參數保存舊值；
computed用于處理復雜的邏輯運算，主要和methods儲存方法來進行區分；methods儲存方法，，computed儲存需要處理的數據值；methods每次都會調用，computed有緩存機制，只有改變時才執行，性能更佳；總的來說：
watch擅長處理的場景：一個數據影響多個數據
computed擅長處理的場景：一個數據受多個數據影響
computed 和 methods 的區別
computed: 計算屬性是基于它們的依賴進行緩存的,只有在它的相關依賴發生改變時才會重新求值對于 method
method: 只要發生重新渲染，調用總會執行該函數
vue中如何解決頁面不重新渲染問題
使用vue，會遇到這樣一個問題，修改了對象的屬性后，頁面不會渲染
- 修改對象屬性后頁面未重新渲染可以使用 this.$set(對象名稱, '屬性名', '屬性值')
- 使用this.$forceUpdate()方法可重新渲染頁面
v-if和v-for一起使用的弊端以及它的解決辦法？
- 由于v-for的優先級比v-if高，所以導致每循環一次就會去v-if一次
- 而v-if是通過創建和銷毀dom元素來控制元素的顯示與隱藏
- 所以就會不停的去創建和銷毀元素，造成頁面卡頓，性能下降。
解決辦法：在v-for的外層或內層包裹一個元素來使用v-if
v-show指令和v-if指令的區別是什么？
v-show 可以根據表達式的值來顯示或者隱藏HTML元素。當v-show賦值為false時，元素被隱藏，此時查看代碼時，該元素上會多一個內聯樣式style=“display:none”；而v-if會控制這個 DOM 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只需要一次顯示或隱藏時，使用v-if更加合理。
虛擬DOM，diff算法？
- 讓我們不用直接操作DOM元素，只操作數據便可以重新渲染頁面
- 虛擬dom是為了解決瀏覽器性能問題而被設計出來的
當操作數據時，將改變的dom元素緩存起來，都計算完后再通過比較映射到真實的dom樹上- diff算法比較新舊虛擬dom。如果節點類型相同，則比較數據，修改數據；如果節點不同，直接干掉節點及所有子節點，插入新的節點；如果給每個節點都設置了唯一的key，就可以準確的找到需要改變的內容，否則就會出現修改一個地方導致其他地方都改變的情況。比如A-B-C-D, 我要插入新節點A-B-M-C-D,實際上改變的了C和D。但是設置了key，就可以準確的找到B C并插入
過濾器 (Filter)
在Vue中使用filters來過濾(格式化)數據，filters不會修改數據，而是過濾(格式化)數據，改變用戶看到的輸出（計算屬性 computed ，方法 methods 都是通過修改數據來處理數據格式的輸出顯示。
使用場景： 比如需要處理時間、數字等的的顯示格式；
常見的事件修飾符及其作用
- .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
- .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；
- .capture ：當元素發生冒泡時，先觸發帶有該修飾符的元素。若有多個該修飾符，則由外而內觸發。如 div1中嵌套div2中嵌套div3.capture中嵌套div4，那么執行順序為：div3=》div4=》div2=》div1
- .self ：只會觸發自己范圍內的事件，不包含子元素；
- .once ：只會觸發一次。
Vue 組件 data 為什么必須是函數 ?
因為組件是可以復用的,JS 里對象是引用關系,如果組件 data 是一個對象,那么子組件中的 data 屬性值會互相污染。
所以一個組件的 data 選項必須是一個函數,因此每個實例可以維護一份被返回對象的獨立的拷貝。
axios是什么？
易用、簡潔且高效的http庫， 支持node端和瀏覽器端，支持Promise，支持攔截器等高級配置。
在 Vue. js開發環境下調用API接口，如何避免跨域
config/ index.js內對 proxyTable項配置代理。
組件傳值的方式有哪些？
- 父傳子：子組件通過props['xx'] 來接收父組件傳遞的屬性 xx 的值
- 子傳父：子組件通過 this.$emit('fnName',value) 來傳遞,父組件通過接收 fnName 事件方法來接收回調
- 其他方式：通過創建一個bus，進行傳值
- 使用Vuex
如何讓CSS只在當前組件中起作用？
在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即。
keep-alive是什么？
如果需要在組件切換的時候，保存一些組件的狀態防止多次渲染，就可以使用 keep-alive 組件包裹需要保存的組件。
兩個重要屬性，include 緩存組件名稱，exclude 不需要緩存的組件名稱。
如何在 Vue. js動態插入圖片
對“src”屬性插值將導致404請求錯誤。應使用 v-bind:src （簡寫:src）格式代替。
vuex的核心概念
- state => 基本數據
- getters => 從基本數據派生的數據
- mutations => 修改數據，同步
- actions => 修改數據，異步 (Action 提交的是 mutation，而不是直接變更狀態)
- modules => 模塊化Vuex
vuex是什么？怎么使用？哪種功能場景使用它？
- Vuex 是一個專為 Vue.js 應用程序開發的狀態管理器，采用集中式存儲管理應用的所有組件的狀態，主要是為了多頁面、多組件之間的通信。
- Vuex有5個重要的屬性，分別是 State、Getter、Mutation、Action、Module，由 view 層發起一個 Action 給 Mutation，在 Mutation 中修改狀態，返回新的狀態，通過 Getter暴露給 view層的組件或者頁面，頁面監測到狀態改變于是更新頁面。如果你的項目很簡單，最好不要使用 Vuex，對于大型項目，Vuex 能夠更好的幫助我們管理組件外部的狀態.
- 一般可以運用在購物車、登錄狀態、播放等場景中。
vue中key值的作用
- key值：用于 管理可復用的元素,標識數據的唯一性。因為Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染
- key的作用主要是為了高效的更新虛擬DOM
- 當我們修改了某個數據，如果直接渲染到真實dom上會引起整個dom樹的重繪和重排，因此采用diff算法來解決上述問題，通過改變局部dom來更新視圖。（渲染真實的dom的開銷比較大）
使用import時，webpack會對node_modules里的依賴做什么？
- 配置相關路徑
持續更新中......
