VueJs（前端面試題整合）

vue和react的區別

• React嚴格上只針對MVC的view層，Vue則是MVVM模式
• virtual（虛擬） DOM不一樣，vue會跟蹤每一個組件的依賴關系，不需要重新渲染整個組件樹，而對于React而言，每當應用的狀態被改變時，全部組件都會重新渲染，所以react中會需要shouldComponentUpdate這個生命周期函式方法來進行控制
• 組件寫法不一樣，React推薦的做法是 JSX + inline style，也就是把HTML和CSS全都寫進JavaScript了，即'all in js'；Vue推薦的做法是webpack+vue-loader的單檔案組件格式，即html，css，js寫在同一個檔案
• 資料系結：vue實作了資料的雙向系結，react資料流動是單向的
• state物件在react應用中不可變的，需要使用setState方法更新狀態；在vue中，state物件不是必須的，資料由data屬性在vue物件中管理

redux和vuex的區別

• vuex是redux的基礎上進行改變，對倉庫的管理更加明確
• 使用mutation來替換redux中的reducer
• vuex有自動渲染的功能,所以不需要更新
• vuex是專門為vue提供的狀態管理工具,而redux是一個泛用的狀態管理框架

vuex的實作原理

Vuex的狀態存盤是回應式的，當Vue組件從store中讀取狀態時，若store中狀態發生改變，回應的組件也會得到更新狀態，但不能直接改變state,必須通過顯示的提交(commit)mutations來追蹤每一個狀態的變化

雙向資料系結的原理

vue實作雙向資料系結的原理就是利用了 Object.defineProperty() 這個方法重新定義了物件獲取屬性值(get)和設定屬性值(set)的操作來實作的，
在MDN上對該方法的說明是：Object.defineProperty() 方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性， 并回傳這個物件， 它接收三個引數，要操作的物件，要定義或修改的物件屬性名，屬性描述符，重點就是最后的屬性描述符，
屬性描述符是一個物件，主要有兩種形式：資料描述符和存取描述符，這兩種物件只能選擇一種使用，不能混合兩種描述符的屬性同時使用，上面說的get和set就是屬于存取描述符物件的屬性， 然后我們可以通過在存取描述符中的get和set方法內寫入自定義的邏輯來實作物件獲取屬性和設定屬性時的行為，

Vue中父組件如何向子組件傳值

父子組件傳參：

1.父傳子：通過props屬性實作；子組件要做型別檢測；

2.子傳父：

• 子組件this.$emit觸發父組件監聽的方法；$emit第二個引數為：向父組件傳遞的資料
• 父組件監聽子組件觸發的事件，然后呼叫系結的方法；

非父子組件傳參：

• 路由傳值：<router-link>和編程式導航中，均可在query/params中傳值，在子組件中：this.$route.query
• 通過$parent $children方法呼叫層級關系的組件內部的資料和方法：this.$parent.$data.id 獲取父元素data中的id，但是容易造成代碼耦合性太強，難以維護
• eventBus：在全域定義一個eventBus
  window.eventBus = new Vue( )或者Vue.eventBus = new Vue( )
  在需要傳遞引數的組件中定義一個emit發送需要傳遞的值：eventBus.$emit(‘name’,id)
  在需要接受引數的組件中，用on接受該值：eventBus.$on(‘name’,(val) => {…})
  注意：使用完后要在beforeDestroy( )中關閉這個eventBus eventBus.$off(‘name’)
• 本地存盤：localStorage或者sessionStorage，setItem存盤value，getItem獲取value
• 狀態管理 Vuex

列舉Vue中的事件修飾符

Vue.js為v-on提供了事件修飾符，
修飾符是由點開頭的指令后綴來表示的，
.stop 阻止事件繼續傳播
.prevent 阻止默認事件
.capture 使用捕獲模式
.self 只當事件在該元素本身（而不是子元素）觸發時觸發回呼
.once 事件只會觸發一次

vue常用指令有哪些

• v-on 監聽DOM事件，比如v-on:click=”handleFunction”，可簡寫為 @click
• v-bind 系結屬性，比如 v-bind:href=”url”，可簡寫為 : href
• v-for 回圈串列
• v-if 根據運算式seen的真偽來插入/洗掉對應標簽，比如 v-if=”seen”
• v-else 必須跟在v-if后
• v-show 根據運算式的真偽值來切換元素的display CSS屬性
• v-model 表單元素的資料雙向系結
• v-text 定義元素文本，比如 v-text=”message”
• v-html 更新元素的innerHTML
• v-once 只渲染元素和組件一次

用過哪些基于Vue的組件庫？

Element-ui桌面端 mint-ui 移動端
自己總結的

Vue生命周期鉤子有哪些，作用是什么

Vue實體從創建到銷毀的程序，就是生命周期
Vue的生命周期包括：開始創建、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列程序，
在Vue的整個生命周期中，提供了一系列的事件，可以注冊JS方法，達到控制整個程序的目的，在這些JS方法中的this直接指向的是vue的實體， 在Vue的整個生命周期中，實體可以呼叫一些生命周期鉤子，這提供了執行自定義邏輯的機會，

Vue提供的生命周期鉤子如下：

• beforeCreate 在實體初始化之后，資料觀測(data observer，開始監控Data物件資料變化)和初始化事件(init event，Vue內部初始化事件)之前被呼叫，
• created 在實體已經創建完成之后被呼叫，實體已完成以下的配置：資料觀測(data observer)，屬性和方法的運算，event事件回呼，掛載階段尚未開始，$el 屬性不可見，
• beforeMount 在掛載開始之前被呼叫，相關的render函式首次被呼叫，實體已完成以下的配置：編譯模板，把data里面的資料和模板生成html，注意此時還沒有掛載html到頁面上，
• mounted 在el 被新創建的 vm.$el 替換，并掛載到實體上去之后呼叫，實體已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM物件，此時模板中的html渲染到了html頁面中，此時一般可以做一些Ajax操作，注意mounted只會執行一次，
• beforeUpdate 在資料更新之前呼叫，發生在虛擬DOM重新渲染和打補丁之前，可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染程序，
• updated 在由于資料更改導致的虛擬DOM重新渲染和打補丁之后呼叫，呼叫時，組件DOM已經更新，所以可以執行依賴于DOM的操作，然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限回圈，該鉤子在服務器端渲染期間不被呼叫，
• beforeDestroy 在實體銷毀之前呼叫，實體仍然完全可用，
• destroyed 在實體銷毀之后呼叫，呼叫后，所有的事件監聽器會被移除，所有的子實體也會被銷毀，該鉤子在服務器端渲染期間不被呼叫，

自己的總結

v-if和v-show區別

• 相同點：v-if 和 v-show 動態控制dom元素顯示隱藏，
• 不同點：v-if顯示隱藏是將dom元素整個添加或洗掉，（例如：<div v-if=""></div> ，v-if 當值為 true時，顯示div ，當值為false時，改元素消失，代碼也會消失，相當于將代碼洗掉了，當在為true時，頁面會重新渲染div）；而v-show顯示隱藏只是將css屬性設為display: block 或none，dom元素還在，
• 編譯程序：v-if切換有一個區域編譯/卸載的程序，切換程序中合適地銷毀和重建內部的事件監聽和子組件；v-show只是簡單的基于css切換，
• 編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始區域編譯（編譯被快取？編譯被快取后，然后再切換的時候進行區域卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被快取，而且DOM元素保留，
• 性能消耗：一般的，v-if有更高的切換消耗，而v-show有更多的初始化渲染消耗，
• 使用場景：如果需要頻繁的切換而對安全性無要求，使用v-show，如果在運行時，條件不可能改變，則使用v-if較好，

watch和computed區別

應用方面，watch比較適合對狀態的監控，比如監控頁面一個變數的值改變，需要進行什么操作，而computed適合簡單計算并回傳結果，結果隨著內部變數改變而改變，
呼叫方面，watch適合比較耗時的操作，比如網路異步請求，一個變數改變觸發網路請求，watch可以看做一個onchange事件，computed可以看做幾個變數的組合體，

Vuex用過哪些方法，你如何在專案中使用它

Store 表示對Vuex物件的全域參考，組件通過Store來訪問Vuex物件中的State
State Vuex物件的狀態，即其所擁有的資料
Getter 相當于Store的計算屬性，因為就像計算屬性一樣，Getter 的回傳值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算，下面會說到具體的使用場景 Mutation 定義了對State中資料的修改操作，組件使用State中的資料的時候并不能直接對資料進行修改操作，需要呼叫Mutation定義的操作來實作對資料的修改，這也是Vuex定義中所說的用相應的規則來讓資料發生變化的具體實作 Action Mutation中定義的操作只能執行同步操作，Vuex中的異步操作在Action中進行，Action最終通過呼叫Mutation的操作來更新資料

在vuex中用過dispatch()，commit()，mapstate，mapgetters，mapmutation，mapaction，

在專案中的使用：
首先通過npm install vuex --save 安裝vuex
在專案的源代碼檔案夾下（如src檔案夾）新建一個store檔案夾(叫別的名字也行)
store檔案夾下新建一個store.js檔案，用來存放Vuex實體，可以把store注入到在vue實體中，那么所有的組件都可以通過this.$store.state去呼叫，

流程：vue Components使用dispatch()方法觸發action里面的函式，通過在Action里面寫公共的異步呼叫獲取資料，供公共的組件渲染，Action使用commit()方法觸發mutations里面的函式，Mutations去修改state，state重新render vue Components，

vuex的使用便于大型專案管理，Store包含多個Module，Module包含State、Mutation和Action，

mutation和action寫在methods中

getters和state寫在computed中

說說Vue.nextTick鉤子的應用場景

場景一：在created()鉤子函式執行的時候，DOM并未進行任何渲染，這時操作DOM時會報錯，這時，在created中使用Vue.nextTick（callback）進行操作即可解決，實際上直接將操作放在mounted鉤子中是不會發生這種情況的，因為mounted函式執行時代表DOM已經渲染完畢

場景二：當DOM渲染完成后，執行某些操作改變其結構時，需要把異步結果放在Vue.nextTick（callback）中

其實可以理解為，Vue的資料驅動頁面更新并不是資料改變后DOM立即做出回應，Vue 在更新 DOM 時是異步執行的，通過資料更新佇列，監聽資料變化，從而更新視圖，而Vue.nextTick（callback）就是每次DOM渲染后觸發的鉤子

Vue3.0使用Proxy代替Vue2.0中Obeject.defineProperty的原因

Obeject.defineProperty雖然已經能夠實作雙向系結了，但是他還是有缺陷的，只能對屬性進行資料劫持，所以需要深度遍歷整個物件，對于陣列不能監聽到資料的變化，雖然Vue中確實能檢測到陣列資料的變化，但是其實是使用了hack的辦法，并 且也是有缺陷的，

反觀Proxy就沒以上的問題，原生支持監聽陣列變化，并且可以直接對整個物件進行攔截，所以在Vue3.0中使用Proxy替換 Obeject.defineProperty

簡述路由原理

前端路由就是監聽 URL 的變化，然后匹配路由規則， 顯示相應的頁面，并且無須重繪，目前單頁面使用的路由就只有兩種實作方式
hash 模式和history 模式

像www.example.com/#/index就是 Hash URL，當 ## 后面的哈希值發生變化時，不會向服務 器請求資料，可以通過 hashchange 事件來監聽到 URL 的變化，從而進行跳轉頁面，
而www.example.com/index就是History 模式，它是HTML5新推出的功能，比之HashURL更加美觀，

談談Virtual Dom（虛擬DOM）的意義及原理

意義：直接通過JS操作DOM物件會對性能損耗很大，此時，我們可以通過JS物件模擬DOM物件，優化性能

原理：

Virtual Dom：如果需要對比兩個完整的DOM多叉樹，時間復雜度就是O（n^3），React的核心就是通過diff演算法調和，優化Virtual Dom，其團隊優化了普通的DOM多叉樹比較，將時間復雜度降低至O（n），其核心就是對比同層的節點，而不是跨層對比，Vue2.0中也引入了Virtual Dom演算法，它是基于snabbdom演算法修改的

Virtual Dom中的Diff演算法程序：

首先從上至下，從左往右遍歷物件，也就是樹的深度遍歷，這一步中會給每個 節點添加索引，便于最后渲染差異，一旦節點有子元素，就去判斷子元素是否有不同

Virtual Dom演算法的實作步驟

• 通過JS來模擬創建DOM物件
• 判斷兩個物件的差異
• 渲染差異