1.說說vue的雙向資料繫結實現原理（vue響應式原理）？

答：通過監聽器Observer使用Object.definerProperty來劫持各個資料的屬性，如果屬性發上變化，就需要通過訊息訂閱器Dep告訴相應的訂閱者Watcher屬性變化，從而更新檢視View（但是使用Object.definerProperty實現監聽時是有一些痛點的，比如，①無法監測陣列下標變化，導致陣列刪除或者插入元素時，陣列的變化無法實時響應；②只能對物件的屬性進行監測，當物件深度比較深時，只能遍歷每個屬性來實現監聽。vue3.0採用的Proxy，就完全避開了Object.definerProperty方法的這些痛）。

2.vue如何在元件之間進行傳值？

答：props（父元件向子元件傳值，不能在子元件中改變props）、$parent（子元件可以通過$parent 來直接修改父元件的資料，不會報錯）、$emit（子元件呼叫父元件的方法並傳遞資料）、$refs（父元件呼叫子元件的DOM元素）、$children（查詢當前元件的直接子元件，不是響應式的）、vue-bus（事件匯流排，兄弟元件之間傳值）

3.vuex和vue的雙向資料繫結有什麼衝突？

答：在vuex中我們使用v-model來修改vuex.state中的資料,沒有經過mutation函式.在嚴格模式中會丟擲錯誤

解決方案：1.在input中value繫結(vuex中的state)，然後監聽input的change或者input事件，在事件回撥中呼叫mutation修改state的值

2.使用帶有setter的雙向繫結計算屬性

4.vue-router中的history模式和hash模式的區別？

答：hash模式你只能改變#後面的url片段，而history模式下設定的新URL可以是與當前URL同源的任意URL。

history模式會將URL修改得就和正常請求後端的URL一樣,如後端沒有配置對應/user/id的路由處理，則會返回404錯誤

5.說一下vue的生命週期？

答：beforeCreate:例項初始化之後呼叫。

created:例項已經建立完成之後被呼叫。

beforeMount：在掛載開始之前被呼叫。

mounted:DOM元素掛載到頁面之後。

beforeUpdate: 資料更新時呼叫。

updated: 虛擬 DOM 重新渲染和打補丁之後呼叫。

beforeDestroy:在例項銷燬之前呼叫，所有例項仍可以呼叫。

destroyed:在例項銷燬之後呼叫，所有例項被銷燬。

6.路由懶載入的作用?

答：懶載入即在需要的時候才進行載入，隨用隨載。在單頁面應用中，如果沒有應用懶載入，webpack打包後的檔案會非常大，導致第一次進入首頁時，載入時間過長，不利於使用者體驗。而運用懶載入可以將頁面進行劃分，需要的時候才載入頁面，可以有效的分擔首頁所承受的載入壓力，有效減少了載入用時。

// 註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被繫結的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

區域性註冊

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

8.混入（Mixin）？

答：混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。

9.父子元件生命週期的執行順序？

答：父beforeCreate-->父created-->父beforeMount-->子beforeCreate-->子created-->子beforeMount-->子mounted-->父mounted

父beforeUpdate->子beforeUpdate->子updated->父updated

父 beforeUpdate -> 父 updated

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

10.如何阻止元件間的樣式相互干擾？

答：給style標籤新增scoped屬性

11.對虛擬dom的瞭解，說說實現原理？

答：可以看作是一個使用javascript模擬DOM結構的樹形結構物件。對於開發者而言，頻繁的操作DOM結構會造成瀏覽器的迴流或者重繪，這些都是效能的殺手，而虛擬dom可以通過diff演算法進行新舊DOM的對比，然後給真實DOM打補丁，從而減少實際操作DOM的次數，達到效能優化的目的。

12.什麼是迴流和重繪？它們的區別？

答：當render tree中的一部分因為佈局改變而需要重新構建，這就是迴流(reflow)，每個頁面在第一次載入時一定會迴流，因為要構建render tree，在迴流的時候瀏覽器會使渲染樹中受到影響的一部分失效，重新進行構造，迴流結束後，瀏覽器會重新繪製到螢幕中，這就是重繪，同樣在render tree中只是改變風格樣式，不改變佈局的，也是重繪。也就是迴流畢引起重繪，而重繪不一定會引起迴流

13.vue的diff演算法？

答：同級比較，再比較子節點。

先判斷一方有子節點一方沒有子節點的情況(如果新的children沒有子節點，將舊的子節點移除)

比較都有子節點的情況

遞迴比較子節點

14.v-show和v-if的區別？

答：v-show和v-if都能控制元素的顯示和隱藏，但是v-show本質就是通過設定css中的display設定為none，控制隱藏。而v-if是動態的向DOM樹內新增或者刪除DOM元素

15.vue中如何監聽陣列的變化？

答：vue重寫了陣列的push、splice、pop等方法，通過執行ob.dep.notify()將當前陣列的變更通知給其訂閱者，陣列訂閱者會將這邊變化更新到頁面中

16.談談keep-alive？

答：keep-alive可以實現元件快取，當元件切換時不會對當前元件進行解除安裝。

17.為什麼data要設定成函式？

答：一個元件被複用多次的話，也就會建立多個例項，因為都是同一個建構函式，而且data作為一個物件，如果不使用函式返回，則每個例項使用的都是同一個記憶體的引用地址，一個數據改變了其他也改變了，而js中只有函式構成作用域，每個例項的作用域都是獨立的，互相不受影響。

18.Computed和Watch的區別?

答：computed是計算屬性，依賴其他屬性計算值，並且computed的值有快取，只有當計算值變化才會返回內容。

watch監聽到值的變化就會執行回撥，在回撥中可以進行一些邏輯操作。

所以一般來說需要依賴別的屬性來動態獲得值的時候可以使用computed，對於監聽到值的變化需要做一些複雜業務邏輯的情況可以使用watch。

19.能講一講MVVM嗎？

答：MVVM是Model-View-ViewModel縮寫，也就是把MVC中的Controller演變成ViewModel。Model層代表資料模型，View代表UI元件，ViewModel是View和Model層的橋樑，資料會繫結到viewModel層並自動將資料渲染到頁面中，檢視變化的時候會通知viewModel層更新資料。