前端常見Vue2.0面試題

今天我們來說說常見的vue面試題，其實這個技術已經出現了幾年時間，每個城市的問法也都八九不離十，因為vue也就那麼些技術，問不出什麼太新鮮的東西。目前vue3.0興起，可能會有一些面試官頂多問下與2.0的差別，那麼今天我們就簡單說說關于vue的一些面試題。

其實部落客自己也是不愛背題，在面試前從來不怎麼看題，一般都是用到的東西說一說。但事實上面試官就看你回答得怎麼樣，很少有面試官真正能感覺出你到底是不是背的，是以部落客在這方面就很吃虧，先說一下經常被問到的知識，簡單些，回答上你們可以更好。我給你們學一下大部分的面試官：

️注意：本人履歷中有本人部落格連結，若面試官看到此篇文章就當作沒看見就可以了。自己頭腦不好使，這些都是随筆記錄，寫完也經常記不住的

--- 開始：

0、vue用了多久了？說一下自己所做的項目情況。

根據自己的情況說。

1、vue中的通信都有哪些？

父子通信，兄弟通信，vuex。

2、嗯，那你說說父子通信都怎麼傳值的？

父傳子用props接收參數進行傳值，在子元件中定義一個props，來接受父元件傳過來的值，并在子元件中使用。

3、那如果想傳參嚴謹一些怎麼實作呢？比如隻接受某些類型的參數？

我們在props中可以定義參數的類型，比如我就固定接收一個數字類型，我可以定一個變量為num，設定一些類型。

props:{
  num:Number
}           

4、嗯，那子傳父呢？

子傳父，用一個回調函數，通過

this.$emit()

的方法。它有兩個參數，第一個是父元件中監聽的方法名，第二個是方法。父元件監聽這個方法名即可。

5、嗯，那還有沒有其他方法可以實作的呢？

vue中新增了兩個新增事件，一個是

v-bind="$attrs"

，一個是

v-on='$listeners'

。當我們在建立一些組建的時候，這兩個事件可以幫助我們監聽到子元件的改變，進而實作了父元件的變化。

6、那這兩個方法分别是什麼用途呢？

v-bind="$attrs"

它包含了父作用域中不作為 prop 被識别的特性綁定；

v-on='$listeners'

它包含了父作用域中的事件監聽器，可以觸發父元件中的事件。

7、好，那你介紹一下vueX吧，說說其中都有什麼。

vueX是處理複雜的父子通信時，需要用到的技術。

state中可以定義一些常量，getters中寫觸發state改變的方法，通常用到getters比較少。

還有兩個可以存放方法的地方是actions和mutations，一個是異步，一個是同步，我們一般都用mutations存放一些方法，在頁面中通過

this.$store.commit()

方法來觸發mutations，進而改變state中的值。

複習vuex可以點選這裡

8、自己怎麼封裝一個元件？（或者問如果頁面有相同的功能塊怎麼辦？）

很簡單啊，在components檔案夾中建立一個

.vue

元件，我們标準命名首字母大寫。寫上公用的元件和樣式，内部的值都用動态綁定。并且建立props接收方法即可。不過現在的UI庫也都特别多，我們一般都直接使用UI庫就可以了，簡單還友善，有不同的地方，簡單封裝一下就可以了。

9、你們路由都怎麼封裝的？

我們都是使用公司給的架構，vue-cli在建立路由時，會直接引入路由元件的，我們隻需要在

views

檔案夾下建立自己的頁面，在路由

path

中定義頁面路徑；寫個

name

名稱；在

component

中可以用個箭頭函數寫上頁面的路徑即可。并且我們一般會定義一個重定向

redirect

到一個指定頁。

10、那你們環境都怎麼配置的？

（雖然說公司都是配置好的，不過也要簡單的說說，

點此跳轉vue架構配置

）

目前我們用的都是vue-cli3.0的配置，下載下傳完架構後，自建

vue.config.js

檔案，其中可以引入node中的

path

來打包一些樣式檔案等，是他們壓縮到一個盤下。vue-cli3.0提供了一個

publicPath

屬性，之前2.0叫 baseURL。在這我們可以進行測試環境或上線環境的配置，可以通過

process.env.NODE_ENV === 'production' ? '/自己項目的路徑path/' : '/'

進行三目判斷，我們還可以配置各種 loader ，以及配置 proxy 來解決跨域請求。

11、嗯，那你再說一下vue中常用的生命周期有哪些，分别是幹什麼的

常用的有8個（生命周期不僅僅是8個），都是成對出現。分别是：

beforeCreate階段、created階段；

beforeMount階段、mounted階段；

beforeUpdate階段、updated階段；

beforeDestroy階段、destroyed階段；

分别為：建立前/後，載入前/後，更新前/後，銷毀前/後。

12、那執行個體是在哪個階段建立完的？

在mounted階段執行個體建立完成。

13、執行個體初始化是在哪個階段？

在created階段執行個體初始化，但還未完成。

14、有沒有了解過vue的實作原理？

vue采用的是資料劫持，結合釋出者和訂閱者模式，通過

Object.defineProperty()

，來對于每個屬性的

getter

和

setter

進行劫持，在資料更改時，釋出消息給到訂閱者，重新渲染頁面。

（具體的步驟有興趣的可以去看源碼）

15、知不知道hash和history兩種模式？簡單說說：

直覺上的差別就是差一個

“#”

，hash中的位址是寫在

“#”

後邊的；但history沒有。

要是使用hash模式，hash之前的内容會包含在請求中；history模式URL就要和後端進行一緻，是以要改為history也需要後端的配合，否則會報錯。

是以hash模式在每次重新整理頁面時是直接更改

“#”

後的東西，history每次重新整理會重新像後端請求整個網址，也就是重新請求伺服器。如果後端沒有及時響應，就會報錯404！。history的好處是可以進行修改曆史記錄，并且不會立刻像後端發起請求。不過如果對于項目沒有硬性标準要求，我們可以直接使用hash模式開發。

16、在開發時，有沒有遇到過什麼問題印象深刻？

（按照自己的情況說。）

17、好的，準備入職

文章寫到這裡，希望大家可以有所收獲！

weChat:VillinWeChat