1.談談你對MVVM開發模式的理解

MVVM分為Model、View、Viewmodel三者， Model：代表資料模型，資料和業務邏輯都在Model層中定義； View：代表UI視圖，負責資料的展開； ViewModel：負責監聽Model中資料的改變并且控制視圖的更新，處理用戶互動操作； Model和View并無直接關聯，而且通過Viewmodel來進行聯系的，Model和Viewmodel之間有著雙向資料系結的聯系，因此當Model中的資料改變時會觸發View層的重繪，View中由于用戶互動操作而改變的資料也會在Model中同步，這種模式實作了Model和View的資料自動同步，因此開發者只需要專注對資料的維護操作即可，而不需要自己操作dom，

2.Vue有哪些指令

v-html	相當于innerHTML，系結一些包含html代碼的資料在視圖上
v-text	用于更新標簽包含的文本，它的作用跟雙大括號{{}}效果是一樣，當于innerText
v-on	監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼,通過v-on指令修飾click點擊事件,可簡寫用@代替
v-bind	資料單向系結，用于動態改變標簽內的屬性 ，可簡寫用：代替
v-once	界面不跟資料變化，只渲染一次
v-model	資料雙向系結，用于實作表單輸入和應用狀態資料系結
v-show	前端樣式塊、元素在指令的運算式回傳 true值的時候被渲染 ，不會重新進行DOM的洗掉和創建操作，只切換了元素的 display:none 樣式
v-if	前端樣式塊、元素在指令的運算式回傳 true值的時候被渲染 ，會重新進行DOM的洗掉和創建操作
v-for	相當于JS中的for in回圈, 可以根據資料多次渲染元素
v-else	和v-if指令搭配使用，沒有對應的值，當v-if的值false，v-else才會被渲染出來
v-cloak	資料渲染后自動顯示元素，可以解決插值運算式閃爍的問題

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

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

4.什么是vue生命周期

Vue 實體從創建到銷毀的程序，就是生命周期，也就是從開始創建、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列程序，我們稱這是 Vue 的生命周期，

5. vue生命周期的作用是什么

它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實體的程序時更容易形成好的邏輯，

6.vue的生命周期及作用

創建階段：
beforecreate：實體已經初始化，但不能獲取DOM節點，(沒有data，沒有el)
created:實體已經創建，仍然不能獲取DOM節點，(有data，沒有el)
載入階段：
beforemount：模板編譯完成，但還沒掛載到界面上，(有data，有el)
mounted：編譯好的模板已掛載到頁面中(資料和DOM都已經渲染出來)，
更新階段：
beforeupdate：資料發生變化立即呼叫，此時data中資料是最新的，但頁面上資料仍然是舊的(檢測到資料更新時，但DOM更新前執行)，
updated：更新結束后執行，此時data中的值和頁面上的值都是最新的，
銷毀階段：
beforedestroy：當要銷毀vue實體時，在銷毀之前執行，
destroy：在銷毀vue實體時執行，

7.你的介面請求一般放在哪個生命周期中

介面請求一般放在 mounted中，但需要注意的是服務端渲染時不支持 mounted，需要放到created中

8.vue組件間通信方式

1.vue父組件向子組件傳遞資料？
　主要通過props來實作的 具體實作：父組件通過import引入子組件，并注冊，在子組件標簽上添加要傳遞的屬性，子組 件通過props接收，

2.子組件向父組件傳遞事件？
　父組件向子組傳遞事件方法，子組件通過$emit觸發事件，回呼給父組件

3.任意組件之間通信$emit.$on:eventBus就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接受事件，專案比較小時合適

9.Vue的雙向資料系結原理是什么？

vue.js是采用資料劫持結合發布者 - 訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發相應的監聽回呼，

10.vue中 key 值的作用

key的作用主要是為了高效的更新虛擬DOM，

key 是給每一個 vnode 的唯一 id,依靠 key,我們的 diff 操作可以更準確、更快速，

當有相同標簽名的元素切換時，需要通過 key 特性設定唯一的值來標記以讓 Vue 區分它們，
否則 Vue 為了效率只會替換相同標簽內部的內容，

11.Vue 組件 data 為什么必須是函式 ?

避免組件中的資料互相影響，同一個組件被復用多次會創建多個實體，如果data是一個物件的話，這些實體用的就是同一個建構式，為了保證組件的資料獨立，要求每個組件都必須通過data函式回傳一個物件作為組件的狀態，

12.nextTick 的作用

nextTick可以讓我們在下次 DOM 更新回圈結束之后執行延遲回呼，用于獲得更新后的 DOM

13.computed和watch區別

computed是計算屬性,具有快取性，
當頁面中有某些資料依賴其他資料進行變動的時候，可以使用計算屬性computed，
用于依賴發生變化時，觸發屬性重新計算，

watch更多的是一種觀察的作用，用于監聽某些資料的回呼，每當所監聽的資料發生變化時才能執行回呼處理后續操作，

在 Vue 中，watch 就是監聽值變化 換句話說，如果監聽的值變化了，就去執行對應的函式 watch 有兩個重要的選項，

1.immediate，初始化監聽，表示第一次渲染的時候是否執行這個函式

2.deep，深度監聽，如果監聽一個物件，那么是否也監聽到物件里面的屬性變化

14.vue-loader是什么？使用它的用途有哪些？

vue檔案的一個加載器，

用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

15.為什么避免 v-if 和 v-for 用在一起

當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素， 不會再重復遍歷串列中的每個值，取而代之的是，我們只檢查它一次， 且不會在 v-if 為否的時候運算 v-for，

16.delete和Vue.delete洗掉陣列的區別

delete 只是被洗掉的元素變成了 empty/undefined 其他的元素的鍵值還是不變， Vue.delete 直接洗掉了陣列 改變了陣列的鍵值，

17.$route和$router的區別

$route是“路由資訊物件”，包括path，params，hash，query，fullPath，matched，name等路由資訊引數，

而$router是“路由實體”物件包括了路由的跳轉方法，鉤子函式等

18.v-modal的使用

v-model用于表單資料的雙向系結，其實它就是一個語法糖，這個背后就做了兩個操作：

v-bind系結一個value屬性；

v-on指令給當前元素系結input事件

19.請說出vue.cli專案中src目錄每個檔案夾和檔案的用法？

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

20.vue的兩個核心點

資料驅動、組件系統

資料驅動：ViewModel，保證資料和視圖的一致性，

組件系統：應用類UI可以看作全部是由組件樹構成的，

21.vue更新陣列時觸發視圖更新的方法

push()；pop()；shift()；unshift()；splice()； sort()；reverse()

22.什么是宣告式導航，什么是編程式導航

宣告式導航
<router-link to=""></router-link>
<router-link tag="li" to="/">首頁</router-link>

編程式導航
router.push(...)
this.$router.push('/goods/detail')
this.$router.push(path): 相當于點擊路由鏈接(可以回傳到當前路由界面) ==>> 佇列的方式（先進先出）
this.$router.replace(path): 用新路由替換當前路由(不可以回傳到當前路由界面) ==>> 堆疊的方式（先進后出）

23.<keep-alive></keep-alive>的作用是什么?

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染，

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

在組件中的style前面加上scoped

25.如何獲取dom?

ref="domName" 用法：this.$refs.domName