vue.js初級面試題（必備）

根據本身的親身經驗總結出了10道與vue相關的面試題，不是最全的，但必定是最多見的 。（GitHub地址：https://github.com/OmegaMibai）

​

1. mvvm和其它框架（jquery）的區別是什麼？哪些場景適合？

答：區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做；

場景：數據操做比較多的場景，更加便捷。

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

答： v-if：判斷是否隱藏；

v-for：數據循環出來；

v-bind:class：綁定一個屬性；

v-model：實現雙向綁定。

3. vue的優勢是什麼？

答：低耦合、可重用、性獨立開發、可測試。

4. vue的生命週期

答：vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。（簡略描述）

總共分爲8個階段：（詳細描述）

beforeCreate----建立前

組件實例更被建立，組件屬性計算以前，數據對象data都爲undefined，未初始化。

created----建立後

組件實例建立完成，屬性已經綁定，數據對象data已存在，但dom未生成，$el未存在

beforeMount---掛載前

vue實例的$el和data都已初始化，掛載以前爲虛擬的dom節點，data.message未替換

mounted-----掛載後

vue實例掛載完成，data.message成功渲染。

beforeUpdate----更新前

當data變化時，會觸發beforeUpdate方法

updated----更新後

當data變化時，會觸發updated方法

beforeDestory---銷燬前

組件銷燬以前調用

destoryed---銷燬後

組件銷燬以後調用，對data的改變不會再觸發周期函數，vue實例已解除事件監聽和dom綁定，但dom結構依然存在

5.組件之間的傳值通訊？

答：父組件向子組件傳值：
1）子組件在props中建立一個屬性，用來接收父組件傳過來的值；
2）在父組件中註冊子組件；
3）在子組件標籤中添加子組件props中建立的屬性；
4）把須要傳給子組件的值賦給該屬性
子組件向父組件傳值：
1）子組件中須要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
2）將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應事件的方法；
3）在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。

6.mvvm和mvc區別？

答：mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者須要主動更新到View 。

7.什麼是MVVM

答：即：Model View VM

Model 是數據, data;
View 是模板;
VM 是 vm = new Vue();

VM 用了鏈接數據和視圖, 視圖的輸入框綁定了v-model, 用戶輸入後會改變data; Model改變也會同步視圖更新相關的依賴, 雙向綁定就是vm起了做用。

8.組件之間跳轉的方法

答：① 直接修改地址欄中的路由地址

② 經過router-link實現跳轉：

<router-link to="/myRegister">註冊</router-link>

③ 經過js的編程的方式：

jumpToLogin: function () {

this.$router.push('/myLogin');

}

9.vue中解決跨域問題

答： ① 後臺更改header（最多見也是最經常使用的解決辦法）：

header('Access-Control-Allow-Origin:*');//容許全部來源訪問

header('Access-Control-Allow-Method:POST,GET');//容許訪問的方式 　

② 使用JQuery提供的jsonp ：

methods: { 
                getData () { 
                     var self = this 
                     $.ajax({ 
                     url: 'http://f.apiplus.cn/bj11x5.json', 
                     type: 'GET', 
                     dataType: 'JSONP', 
                     success: function (res) { 
                     self.data = res.data.slice(0, 3) 
                     self.opencode = res.data[0].opencode.split(',') 
                              } 
                            }) 
                        } 
                   } 複製代碼複製代碼

③ 使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）

10.es6經常使用語法（五條便可）

 答：1. 變量聲明const和let；

2. 模板字符串；

3. 箭頭函數；

4. import導入模塊、export導出模塊；

5. promise