根據自己的親身經驗總結出了10道與vue相關的面試題，不是最全的，但一定是最常見的 ！！！

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

 答：一個model+view+viewModel框架，資料模型model，viewModel連線兩個。 

        區別：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 ：

1. methods: {

2. getData () {

3. var self = this

4. $.ajax({

5. url: 'http://f.apiplus.cn/bj11x5.json',

6. type: 'GET',

7. dataType: 'JSONP',

8. success: function (res) {

9. self.data = res.data.slice(0, 3)

10. self.opencode = res.data[0].opencode.split(',')

11. }

12. })

13. }

14. }

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

10.es6常用語法（五條即可）

 答：1. 變數宣告const和let；

       2. 模板字串；

       3. 箭頭函式；

       4. import匯入模組、export匯出模組；

       5. promise