「面試題」和Vue.js有關的41個基礎問題

1. Vue.js介紹

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API；
Vue.js是一個構建數據驅動的Web界面的庫。
Vue.js是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動採用單文件組件和 Vue生態系統支持的庫開發的複雜單頁應用。數據驅動+組件化的前端開發。
簡而言之：Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

2.什麼是 mvvm？

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表數據模型，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。

3.簡述Vue的響應式原理

當一個Vue實例創建時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter並且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。 每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之後當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。

4.Vue.js特點

簡潔：頁面由HTML模板+Json數據+Vue實例組成
數據驅動：自動計算屬性和追蹤依賴的模板表達式
組件化：用可複用、解耦的組件來構造頁面

5.scss是什麼？

預處理css，把css當前函數編寫，定義變量,嵌套.

6.vue生命週期的理解？

總共分為 8 個階段創建前/後，載入前/後，更新前/後，銷燬前/後。
創建前/後： 在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。 載入前/後：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。 更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。 銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發週期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，但是 dom 結構依然存在。

7.為什麼vue中data必須是一個函數？

對象為引用類型，當重用組件時，由於數據對象都指向同一個data對象，當在一個組件中修改data時，其他重用的組件中的data會同時被修改；而使用返回對象的函數，由於每次返回的都是一個新對象（Object的實例），引用地址不同，則不會出現這個問題。

8.active-class是哪個組件的屬性？

vue-router模塊的router-link組件。

9.vue-router有哪幾種導航鉤子？

三種。
第一種：全局導航鉤子router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
第二種：組件內的鉤子；
第三種：單獨路由獨享組件

10.說出至少4種vue當中的指令和它的用法？

v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

11.vue-loader是什麼？使用它的用途有哪些？

解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

12.請說出vue.cli項目中src目錄每個文件夾和文件的用法？

assets文件夾是放靜態資源；
components是放組件；
router是定義路由相關的配置;
view視圖；
app.vue是一個應用主組件；
main.js是入口文件

13.計算屬性和watch的區別？

在我們運用vue的時候一定少不了用計算屬性computed和watch
computed計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板裡把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓你的代碼更加聲明式、數據驅動並且易於維護。
watch監聽的是你定義的變量,當你定義的變量的值發生變化時，調用對應的方法。就好在div寫一個表達式name，data裡寫入num和lastname,firstname,在watch裡當num的值發生變化時，就會調用num的方法，方法裡面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經定義過的變量。

14.prop 驗證，和默認值

我們在父組件給子組件傳值得時候，為了避免不必要的錯誤，可以給prop的值進行類型設定，讓父組件給子組件傳值得時候，更加準確，prop可以傳一個數字，一個布爾值，一個數組，一個對象，以及一個對象的所有屬性。組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告比如傳一個number類型的數據，用defalt設置它的默認值，如果驗證失敗的話就會發出警告。

<code>props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},
/<code>

15. vue 組件通信

父傳遞子
父：自定義屬性名 + 數據（要傳遞）=> :value="數據"
子：props ["父組件上的自定義屬性名“] =>進行數據接收)
子傳遞父
在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。
子：this.$emit('自定義事件名稱', 數據) 子組件標籤上綁定@自定義事件名稱='回調函數'
父：methods: {自定義事件() {//邏輯處理} }
兄弟組件
通過中央通信 let bus = new Vue()
A：methods :{ 函數{bus.$emit('自定義事件名'，數據)} 發送
B：created （）{bus.$on('A發送過來的自定義事件名'，函數)} 進行數據接收

16.vue路由傳參數

1.使用query方法傳入的參數使用this.$route.query接受
2.使用params方式傳入的參數使用this.$route.params接受

17.vuex 是什麼？ 有哪幾種屬性？

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。
有 5 種，分別是 state、getter、mutation、action、module
vuex 的 store 是什麼？
vuex 就是一個倉庫，倉庫裡放了很多對象。其中 state 就是數據源存放地，對應於一般 vue 對象裡面的 datastate 裡面存放的數據是響應式的，vue 組件從 store 讀取數據，若是 store 中的數據發生改變，依賴這相數據的組件也會發生更新它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性
vuex 的 getter 是什麼？
getter 可以對 state 進行計算操作，它就是 store 的計算屬性雖然在組件內也可以做計算屬性，但是 getters 可以在多給件之間複用如果一個狀態只在一個組件內使用，是可以不用 getters
vuex 的 mutation 是什麼？
更改Vuex的store中的狀態的唯一方法是提交mutation
vuex 的 action 是什麼？
action 類似於 muation, 不同在於：action 提交的是 mutation,而不是直接變更狀態action 可以包含任意異步操作 vue 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 action 中

如果請求來的數據不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入 vuex 的 state 裡如果被其他地方複用，請將請求放入 action 裡，方便複用，幷包裝成 promise 返回。

18.v-show和v-if指令的共同點和不同點？

v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

19.如何讓CSS只在當前組件中起作用？

將當前組件的

閱讀更多 小白沖沖沖沖 的文章

關鍵字: 設計 HTML JSON