• Vue面試題

• Vue.js介紹

• Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API

• Vue.js是一個構建數據驅動的Web界面的庫。

• Vue.js是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和 Vue生態系統支持的庫開發的復雜單頁應用。數據驅動+組件化的前端開發。

• 簡而言之：Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

• 2.什么是 mvvm？ MVC MVP MVVM

• MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表數據模型，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。

• 3.簡述Vue的響應式原理

• 當一個Vue實例創建時，vue會遍歷data選項的屬性，用 Object.defineProperty poroupoti 將它們轉為 getter/setter并且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。 每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 wocher watcher 重新計算，從而致使它關聯的組件得以更新。

• 4.Vue.js特點

• 簡潔：頁面由HTML模板+Json數據+Vue實例組成

• 數據驅動：自動計算屬性和追蹤依賴的模板表達式

• 組件化：用可復用、解耦的組件來構造頁面

• 輕量：代碼量小，不依賴其他庫

• 快速：精確有效批量DOM更新

• 模板友好：可通過npm，bower等多種方式安裝，很容易融入

• 5.scss是什么？

• 預處理css，把css當前函數編寫，定義變量,嵌套.

• 6.vue生命周期的理解？

• 總共分為 8 個階段創建前/后，載入前/后，更新前/后，銷毀前/后。

• 創建前/后： 在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。 載入前/后：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。 更新前/后：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。 銷毀前/后：在執行 destroy 方法后，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，但是 dom 結構依然存在。

• 7.為什么vue中data必須是一個函數？

• 對象為引用類型，當重用組件時，由于數據對象都指向同一個data對象，當在一個組件中修改data時，其他重用的組件中的data會同時被修改；而使用返回對象的函數，由于每次返回的都是一個新對象（Object的實例），引用地址不同，則不會出現這個問題。

• 8.active-class是哪個組件的屬性？

• vue-router模塊的router-link組件。

• 9.vue-router有哪幾種導航鉤子？

• 三種。

• 一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。

• 第二種：組件內的鉤子；

• 第三種：單獨路由獨享組件

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

• v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

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

• 解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

• 12.請說出vue.cli項目中src目錄每個文件夾和文件的用法？

• assets文件夾是放靜態資源；

• components是放組件；

• router是定義路由相關的配置;

• view視圖；

• app.vue是一個應用主組件；

• main.js是入口文件

• 13.計算屬性和watch的區別

• 在我們運用vue的時候一定少不了用計算屬性computed和watch

• computed計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板里把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓你的代碼更加聲明式、數據驅動并且易于維護。

• watch監聽的是你定義的變量,當你定義的變量的值發生變化時，調用對應的方法。就好在div寫一個表達式name，data里寫入num和lastname,firstname,在watch里當num的值發生變化時，就會調用num的方法，方法里面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經定義過的變量。

• 14.prop 驗證，和默認值

• 我們在父組件給子組件傳值得時候，為了避免不必要的錯誤，可以給prop的值進行類型設定，讓父組件給子組件傳值得時候，更加準確，prop可以傳一個數字，一個布爾值，一個數組，一個對象，以及一個對象的所有屬性。組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告比如傳一個number類型的數據，用defalt設置它的默認值，如果驗證失敗的話就會發出警告。

• props: {

• visible: {

• default: true,

• type: Boolean,

• required: true

• },

• },

• ?

• vue 組件通信

• 父傳遞子

• 父：自定義屬性名 + 數據（要傳遞）=> :value="數據"

• 子：props ["父組件上的自定義屬性名“] =>進行數據接收)

• ?

• 子傳遞父

• 在父組件中注冊子組件并在子組件標簽上綁定自定義事件的監聽。

• 子：this.$emit(‘自定義事件名稱’, 數據) 子組件標簽上綁定@自定義事件名稱=’回調函數’

• 父：methods: {自定義事件() {//邏輯處理} }

• ?

• 兄弟組件

• 通過中央通信 let bus = new Vue()

• A：methods :{ 函數{bus.$emit('自定義事件名’，數據)} 發送

• B：created （）{bus.$on('A發送過來的自定義事件名’，函數)} 進行數據接收

• 16.vue路由傳參數

• 1.使用query方法傳入的參數使用this.$route.query接受

• 2.使用params方式傳入的參數使用this.$route.params接受

• 17.vuex 是什么？ 有哪幾種屬性？

• Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。

• 有 5 種，分別是 state、getter、mutation、action、module

• ?

• vuex 的 store 是什么？

• vuex 就是一個倉庫，倉庫里放了很多對象。其中 state 就是數據源存放地，對應于一般 vue 對象里面的 datastate 里面存放的數據是響應式的，vue 組件從 store 讀取數據，若是 store 中的數據發生改變，依賴這相數據的組件也會發生更新它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性

• vuex 的 getter 是什么？

• getter 可以對 state 進行計算操作，它就是 store 的計算屬性雖然在組件內也可以做計算屬性，但是 getters 可以在多給件之間復用如果一個狀態只在一個組件內使用，是可以不用 getters

• vuex 的 mutation 是什么？

• 更改Vuex的store中的狀態的唯一方法是提交mutation

• vuex 的 action 是什么？

• action 類似于 muation, 不同在于：action 提交的是 mutation,而不是直接變更狀態action 可以包含任意異步操作 vue 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 action 中

• vuex 的 module 是什么？

• 面對復雜的應用程序，當管理的狀態比較多時；我們需要將vuex的store對象分割成模塊(modules)。

• 如果請求來的數據不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入 vuex 的 state 里如果被其他地方復用，請將請求放入 action 里，方便復用，并包裝成 promise 返回

• 18.v-show和v-if指令的共同點和不同點？

• v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏

• v-if指令是直接銷毀和重建DOM達到讓元素顯示和隱藏的效果

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

• 將當前組件的<style>修改為<style scoped>

• 20.<keep-alive></keep-alive>的作用是什么？

• <keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用于保留組件狀態或避免重新渲染。 大白話: 比如有一個列表和一個詳情，那么用戶就會經常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那么就可以對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是重新渲染

• 21.delete和Vue.delete刪除數組的區別？

• delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。 Vue.delete直接刪除了數組 改變了數組的鍵值。

• var a=[1,2,3,4]

• var b=[1,2,3,4]

• delete a[0]

• console.log(a) //[empty,2,3,4]

• this.$delete(b,0)

• console.log(b) //[2,3,4]

• 22.$nextTick是什么？

• vue實現響應式并不是數據發生變化后dom立即變化，而是按照一定的策略來進行dom更新。

• $nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM

• 23.v-on可以監聽多個方法嗎？

• 可以。

• <input type="text" :value="name"?@input="onInput"?@focus="onFocus"?@blur="onBlur" />

• 復制代碼

• 24.v-on 常用修飾符

• .stop 該修飾符將阻止事件向上冒泡。同理于調用 event.stopPropagation() 方法

• .prevent 該修飾符會阻止當前事件的默認行為。同理于調用 event.preventDefault() 方法

• .self 該指令只當事件是從事件綁定的元素本身觸發時才觸發回調

• .once 該修飾符表示綁定的事件只會被觸發一次

• 25.v-for key的作用。

• 當Vue用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的改變，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。 為了給Vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。key屬性的類型只能為 string或者number類型。

• ?

• key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。

• 26.v-for 與 v-if 的優先級

• v-for比v-if優先，如果每一次都需要遍歷整個數組，將會影響速度，尤其是當之需要渲染很小一部分的時候。

• 27.Vue子組件調用父組件的方法

• 第一種方法是直接在子組件中通過this.$parent.event來調用父組件的方法

• 第二種方法是在子組件里用$emit向父組件觸發一個事件，父組件監聽這個事件就行了。

• 28.Promise對象是什么？

• 1.Promise是異步編程的一種解決方案，它是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。promise對象是一個構造函數，用來生成Promise實例；

• 2.promise的兩個特點 對象狀態不受外界影響 && 一旦狀態改變，就不會再變，任何時候都可以得到結果（pending狀態–>fulfilled || pending–>rejected）

• 29.axios的特點有哪些？

• 1、axios是一個基于promise的HTTP庫，支持promise的所有API；

• 2、它可以攔截請求和響應；

• 3、它可以轉換請求數據和響應數據，并對響應回來的內容自動轉換為json類型的數據；

• 4、它安全性更高，客戶端支持防御XSRF；

• 30.vue中的 ref 是什么？

• ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例。

• 31.Vue的路由模式,實現方式？

• hash模式 和 history模式

• hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取； 特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。 hash 模式下:僅 hash 符號之前的內容會被包含在請求中，如?http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

• history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。

• history 模式:前端的 URL 必須和實際向后端發起請求的 URL 一致，如?http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”

• 32.$route和$router的區別？

• $route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。

• $router是’路由實例’對象包括了路由的跳轉方法，鉤子函數等。

• 33.vue.js的兩個核心是什么？

• 數據驅動、組件系統

• 34.vue如何兼容ie的問題。

• babel-polyfill插件

• 35.頁面刷新vuex被清空解決辦法？

• 1.localStorage 存儲到本地再回去

• 2.重新獲取接口獲取數據

• 36.如何優化SPA應用的首屏加載速度慢的問題？

• 1.將公用的JS庫通過script標簽外部引入，減小 app.bundel 的大小，讓瀏覽器并行下載資源文件，提高下載速度；

• 2.在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調用 某個組件時再加載對應的js文件；

• 3.加一個首屏loading圖，提升用戶體驗；

• 37.Vue 改變數組觸發視圖更新

• 以下方法調用會改變原始數組：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )

• 調用方法：Vue.set( target, key, value )

• target：要更改的數據源(可以是對象或者數組)

• key：要更改的具體數據

• value ：重新賦的值

• 38.DOM 渲染在哪個周期中就已經完成？

• mounted

• 注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

• mounted: function () {

• this.$nextTick(function () {

• // Code that will run only after the

• // entire view has been rendered

• })

• }

• 復制代碼

• 39.簡述每個周期具體適合哪些場景

• beforecreate : 可以在這加個loading事件，在加載實例時觸發

• created : 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用

• mounted : 掛載元素，獲取到DOM節點 updated : 如果對數據統一處理，在這里寫上相應函數

• beforeDestroy : 可以做一個確認停止事件的確認框

• 40.第一次加載會觸發哪幾個鉤子？

• 會觸發beforeCreate , created ,beforeMount ,mounted

• 41.動態綁定class

• active classname， isActive 變量

• ?

• 復制代碼

• ?

• ?

• ?

• ?

• ?

• 1、vue是一套漸進式框架的理解

• ?

• 在我看來，漸進式代表的含義是：主張最少。

• 每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。

• 比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：

• 必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）

• 所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。

• 比如React，它也有一定程度的主張，它的主張主要是函數式編程的理念，比如說，你需要知道什么是副作用，什么是純函數，如何隔離副作用。它的侵入性看似沒有Angular那么強，主要因為它是軟性侵入。

• Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用OO和設計模式的那套理念，也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。

• 漸進式的含義，我的理解是：沒有多做職責之外的事。

• ?

• 2、Vue常用的指令

• 3、v-if VS v-show區別

• 4、Vue常用修飾符

• 5、v-on可以監聽多個方法嗎

• 可以，代碼如下：

• <input type="text" :value="name"?@input="onInput"?@focus="onFocus"?@blur="onBlur" />

• ?

• 6、vue中key值的作用

• ?

• 需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

• 其實不只是vue，react中在執行列表渲染時也會要求給每個組件添加上key這個屬性。

• 要解釋key的作用，不得不先介紹一下虛擬DOM的Diff算法了。

• vue和react的虛擬DOM的Diff算法大致相同。

• ?

• ?

• 虛擬DOM見“68題” ，diff算法見“69題”

• ?

• 7、$nextTick的作用

• 8、Vue組件中的data為什么必須是函數

• 當我們定義一個 組件時( <button-counter>)，你可能會發現它的 data 并不是像這樣直接提供一個對象：

• data: {

• count: 0

• }

• ?

• 取而代之的是，一個組件的 data 選項必須是一個函數，因此每個實例可以維護一份被返回對象的獨立的拷貝：

• data: function () {

• return {

• count: 0

• }

• }

• ?

• 9、v-for和v-if的優先級

• 當它們處于同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環中。當你想為僅有的一些項渲染節點時，這種優先級的機制會十分有用。

• 10、詳述組件通信

• 11、keep-alive組件的作用

• 當在這些組件之間切換的時候，你有時會想保持這些組件的狀態，以避免反復重渲染導致的性能問題。例如我們來展開說一說這個多標簽界面：

• ?

• ?

• ?

• ?

• ?

• ?

• 未使用keep-alive.gif

• ?

• 你會注意到，如果你選擇了一篇文章，切換到 Archive 標簽，然后再切換回 Posts，是不會繼續展示你之前選擇的文章的。這是因為你每次切換新標簽的時候，Vue 都創建了一個新的 currentTabComponent 實例。

• ?

• 重新創建動態組件的行為通常是非常有用的，但是在這個案例中，我們更希望那些標簽的組件實例能夠被在它們第一次被創建的時候緩存下來。為了解決這個問題，我們可以用一個 <keep-alive> 元素將其動態組件包裹起來。

• ?

• <keep-alive>

• <component v-bind:is="currentTabComponent"></component>

• </keep-alive>

• ?

• ?

• ?

• ?

• ?

• ?

• 使用了keep-alive.gif

• ?

• 現在這個 Posts 標簽保持了它的狀態 (被選中的文章) 甚至當它未被渲染時也是如此

• ?

• 12、Vue生命周期詳解

• ?

• 什么是Vue的生命周期

• Vue實例有一個完整的生命周期，也就是說從開始創建、初始化數據、編譯模板、掛載DOM、渲染-更新-渲染、卸載等一系列過程，我們稱為Vue實例的生命周期。鉤子就是在某個階段給你一個做某些處理的機會。

• 生命周期的作用

• 就是在某個階段給你一個做某些處理的機會。

• 生命周期總共有幾個階段

• beforeCreate（創建前）：在實例初始化之后，數據觀測和事件配置之前被調用，此時組件的選項對象還未創建，因此無法訪問methods，data，computed等上的方法和數據。

• created（創建后）：實例已經創建完成之后被調用，在這一步，實例已完成了以下配置：數據觀測、屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒有開始，$el屬性目前不可見。created鉤子可以獲取Vue的data，調用Vue方法，獲取原本HTML上的直接加載出來的DOM，但是無法獲取到通過掛載模板生成的DOM。這是一個常用的生命周期，因為你可以調用methods中的方法、改變data中的數據，并且修改可以通過vue的響應式綁定體現在頁面上、獲取computed中的計算屬性等等。通常我們可以在這里對實例進行預處理。也有一些童鞋喜歡在這里發ajax請求，值得注意的是，這個周期中是沒有什么方法來對實例化過程進行攔截的。因此假如有某些數據必須獲取才允許進入頁面的話，并不適合在這個頁面發請求。

• 建議在組件路由勾子beforeRouteEnter中來完成。

• beforeMonut：掛載開始之前被調用：虛擬dom已經創建完成，馬上就要渲染，在這里也可以更改數據，相關的 render 函數首次被調用（虛擬DOM），實例已完成以下的配置：編譯模板，把data里面的數據和模板生成html。注意此時還沒有掛載html到頁面上。

• mounted[?ma?nt?d]：掛載完成，也就是模板中的HTML渲染到了HTML頁面中，此時一般可以做一些ajax操作，組件已經出現在頁面中，數據、真實dom都已經處理好了，事件都已經掛載好了mounted只會執行一次。

• beforeUpdate（更新前）：在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染。

• updated[?p’de?t?d]（更新后）：在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。

• beforeDestroy[d??str??]（銷毀前）：在實例銷毀之前調用。實例仍然完全可用。1.這一步還可以用this來獲取實例。2.一般在這一步做一些重置的操作。比如清除掉組件中的 定時器 和 監聽的dom事件。

• destroyed[d?s’tr??d]（銷毀后）：在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

• 第一次頁面加載會觸發哪幾個鉤子

• beforeCreate

• DOM 渲染在哪個周期中就已經完成

• mounted

• 生命周期使用場景舉例

• beforeCreate：可以在這里加一個loading

• created：loading結束做一些初始化操作

• mounted：ajax請求，配合路由鉤子做一些事情

• beforeDestory：你確認刪除嗎？

• destoryed：當前組件已被刪除，清空相關內容

• ?

• 13、Vue如何監聽鍵盤事件中的按鍵

• 14、Vue中的過濾器有什么用？

• Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示

• 15、單頁面應用和多頁面應用區別及優缺點

• 單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。多應用于pc端。

• 多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新

• ?

• 單頁面的優點：

• ?

• ?

• 用戶體驗好，快，內容的改變不需要重新加載整個頁面，基于這一點spa對服務器壓力較小

• 前后端分離

• 頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）

• ?

• ?

• 單頁面缺點：

• ?

• ?

• 不利于seo

• 導航不可用，如果一定要導航需要自行實現前進、后退。（由于是單頁面不能用瀏覽器的前進后退功能，所以需要自己建立堆棧管理）

• 初次加載時耗時多

• 頁面復雜度提高很多

• ?

• ?

• ?

• ?

• 姓名

• 單頁面應用（SinglePage Web Application，SPA）

• 多頁面應用（MultiPage Application，MPA）

• ?

• ?

• ?

• ?

• 組成

• 一個外殼頁面和多個頁面片段組成

• 多個完整頁面構成

• ?

• ?

• 資源共用(css,js)

• 共用，只需在外殼部分加載

• 不共用，每個頁面都需要加載

• ?

• ?

• 刷新方式

• 頁面局部刷新或更改

• 整頁刷新

• ?

• ?

• url 模式

• a.com/#/pageone

• a.com/pageone.html

• ?

• ?

• 用戶體驗

• 頁面片段間的切換快，用戶體驗良好

• 頁面切換加載緩慢，流暢度不夠，用戶體驗比較差

• ?

• ?

• 轉場動畫

• 容易實現

• 無法實現

• ?

• ?

• 數據傳遞

• 容易

• 依賴 url傳參、或者cookie 、localStorage等

• ?

• ?

• 搜索引擎優化(SEO)

• 需要單獨方案、實現較為困難、不利于SEO檢索 可利用服務器端渲染(SSR)優化

• 實現方法簡易

• ?

• ?

• 試用范圍

• 高要求的體驗度、追求界面流暢的應用

• 適用于追求高度支持搜索引擎的應用

• ?

• ?

• 開發成本

• 較高，常需借助專業的框架

• 較低 ，但頁面重復代碼多

• ?

• ?

• 維護成本

• 相對容易

• 相對復雜

• ?

• ?

• ?

• 16、什么是計算屬性？什么情況使用？

• 模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護，例如：

• ?

• {{ message.split(‘’).reverse().join(‘’) }}

• ?

• • ?
• • 在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉字符串。當你想要在模板中多次引用此處的翻轉字符串時，就會更加難以處理。
• • 所以，對于任何復雜邏輯，你都應當使用計算屬性。
• • 17、vue-cli提供了幾種腳手架模板
• • 六種
• • https://github.com/vuejs/vue-cli/tree/v2#vue-cli–
• • 18、computed、methods的區別
• • 兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。只在相關依賴發生改變時它們才會重新求值。這就意味著只要值還沒有發生改變，多次訪問 定義的計算屬性會立即返回之前的計算結果，而不必再次執行函數。
• • 相比之下，每當觸發重新渲染時，調用方法(methods)將總會再次執行函數。
• • 我們為什么需要緩存？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。
• • 19、什么是自定義指令，有哪些鉤子函數及自定義指令的使用場景
• • 有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
• • 一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：
• • bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。
• • inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
• • update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。
• • componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。
• • unbind：只調用一次，指令與元素解綁時調用。
• • 20、父組件獲取異步動態數據傳遞給子組件
• • ?
• • 在父組件中使用axios獲取異步數據傳給子組件，但是發現子組件在渲染的時候并沒有數據，在created里面打印也是空的，結果發現一開始子組件綁定的數據是空的，在請求數據沒有返回數據時，子組件就已經加載了，并且他綁定的值也是空的，問題找到了，怎么解決呢？
• • ?
• • ?
• • 開始的時候讓子組件隱藏,然后等數據返回的時候，讓子組件顯示
• • 通過v-if，也就是判斷數據是否為空，為空就不渲染，也能解決了
• • 為不能讀取的屬性添加一個默認值，就可以很好的解決了
• • ?
• • 21、vue-router導航解析流程
• • 22、vue-router實現原理
• • 這里指的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應用）的路徑管理器。 換句話說，vue-router就是WebApp的鏈接路徑管理系統。
• • vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。
• • 那與傳統的頁面跳轉有什么區別呢？
• • 1.vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。
• • 2.傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。
• • 在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。路由模塊的本質 就是建立起url和頁面之間的映射關系。
• • 至于為啥不能用a標簽，這是因為用Vue做的都是單頁應用，就相當于只有一個主的index.html頁面，所以你寫的標簽是不起作用的，必須使用vue-router來進行管理。
• • SPA(single page application):單一頁面應用程序，有且只有一個完整的頁面；當它在加載頁面的時候，不會加載整個頁面的內容，而只更新某個指定的容器中內容。
• • 單頁面應用(SPA)的核心之一是:
• • ?
• • 更新視圖而不重新請求頁面;
• • vue-router在實現單頁面前端路由時，提供了三種方式：Hash模式、History模式、abstract模式，根據mode參數來決定采用哪一種方式。
• • ?
• • 路由模式
• • vue-router 提供了三種運行模式：
• • ● hash: 使用 URL hash 值來作路由。默認模式。
• • ● history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
• • ● abstract: 支持所有 JavaScript 運行環境，如 Node.js 服務器端。
• • Hash模式
• • vue-router 默認模式是 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，當 URL 改變時，頁面不會去重新加載。
• • hash（#）是URL 的錨點，代表的是網頁中的一個位置，單單改變#后的部分（/#/…），瀏覽器只會加載相應位置的內容，不會重新加載網頁，也就是說 #是用來指導瀏覽器動作的，對服務器端完全無用，HTTP請求中不包括#；同時每一次改變#后的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”后退”按鈕，就可以回到上一個位置；所以說Hash模式通過錨點值的改變，根據不同的值，渲染指定DOM位置的不同數據。
• • JavaScript實現SPA路由hash模式詳解
• • History模式
• • HTML5 History API提供了一種功能，能讓開發人員在不刷新整個頁面的情況下修改站點的URL，就是利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面；
• • 由于hash模式會在url中自帶#，如果不想要很丑的 hash，我們可以用路由的 history 模式，只需要在配置路由規則時，加入"mode: 'history’",這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面。
• • //main.js文件中
• • const router = new VueRouter({
• • mode: 'history’,
• • routes: […]
• • })
• • ?
• • 當使用 history 模式時，URL 就像正常的 url，例如 yoursite.com/user/id，比較好… 不過這種模式有點問題，還需要后臺配置支持。你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面，如果不這么做，直接訪問頁面空白
• • 配置Apache
• • 第一步：新建：.htaccess文件放在服務器根目錄下 （命令type null>.htaccess）
• • <IfModule mod_rewrite.c>
• • RewriteEngine On
• • RewriteBase /
• • RewriteRule ^index.html$ - [L]
• • RewriteCond %{REQUEST_FILENAME} !-f
• • RewriteCond %{REQUEST_FILENAME} !-d
• • RewriteRule . /index.html [L]
• • </IfModule>
• • ?
• • 除了 mod_rewrite，你也可以使用 FallbackResource。
• • 第二步： src/router/index.js
• • mode: 'history’,
• • base: '/dist/’,
• • ?
• • 第三步：訪問：地址進行測試
• • abstract模式
• • abstract模式是使用一個不依賴于瀏覽器的瀏覽歷史虛擬管理后端。
• • 根據平臺差異可以看出，在 Weex 環境中只支持使用 abstract 模式。 不過，vue-router 自身會對環境做校驗，如果發現沒有瀏覽器的 API，vue-router 會自動強制進入 abstract 模式，所以 在使用 vue-router 時只要不寫 mode 配置即可，默認會在瀏覽器環境中使用 hash 模式，在移動端原生環境中使用 abstract 模式。 （當然，你也可以明確指定在所有情況下都使用 abstract 模式）
• • 23、vue-router有哪幾種導航鉤子
• • 24、vue-router參數傳遞方法詳述及區別
• • 25、如何定義嵌套路由
• • 26、router-link是什么及其常用屬性配置
• • 27、如何實現路由懶加載有什么好處
• • 28、vue-router共有幾種模式，有什么區別？
• • 29、什么是Vuex及使用場景
• • 30、vuex的常用屬性有哪幾個，分別是做什么的
• • 31、簡述vuex更新數據流程或機制
• • ?
• • ?
• • ?
• • ?
• • ?
• • Vuex
• • ?
• • 用戶在組件中發起動作，然后從API中拿數據，就會牽扯到異步操作，所以我們通過dispatch來提交一個action，在action里面發起ajax請求，拿到數據以后我們只需要通過commit提交mutations改變我的state狀態就可以了，狀態改變后視圖就會改變因為Vuex是響應式的，這就是Vuex的運作流程機制
• • ?
• • 32、vuex中如何異步修改數據
• • Action 類似于 mutation，不同在于：
• • Action 提交的是 mutation，而不是直接變更狀態。
• • Action 可以包含任意異步操作。
• • 33、axios、fetch和ajax有什么區別？
• • 34、axios有哪些特點
• • 35、組件樣式中的scoped有什么用
• • 36、vue中常用的UI組件庫有哪些？
• • 37、如何優化首屏加載速度
• • ?
• • ?
• • 路由懶加載
• • ?
• • ?
• • vue項目作為一個單頁面應用，如果不對路由進行處理，在加載首頁的時候，就會將所有組件全部加載，并向服務器請求數據，這必將拖慢加載速度；當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
• • ?
• • 路由懶加載
• • ?
• • ?
• • 圖片資源的壓縮
• • 嚴格說來這一步不算在編碼技術范圍內，但是卻對頁面的加載速度影響很大，特別是對于移動端的項目來說。
• • 對于非logo的圖片文件，讓UI設計師提供jpg格式的，不要用png
• • 對于所有的圖片文件，都可以在一個叫tinypng的網站上去壓縮一下或采用webpack插件進行壓縮
• • ?
• • 使用cdn
• • ?
• • ?
• • 在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會相當的大，影響首開的體驗。
• • 解決方法是，將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來，達到加速首開的目的。
• • 外部的庫文件，可以使用CDN資源，或者別的服務器資源等。
• • 下面，以引入vue、vuex、vue-router為例，說明處理流程。
• • module.exports = {
• • context: path.resolve(__dirname, ‘…/’),
• • entry: {
• • app: './src/main.js'
• • },
• • externals:{
• • 'vue':'Vue',
• • 'vue-router':'VueRouter',
• • 'vuex':'Vuex'
• • },
• • // 格式為’aaa’:’bbb’，其中，aaa表示要引入的資源的名字，bbb表示該模塊提供給外部引用的名字，由對應的庫自定。例如，vue為Vue，vue-router為VueRouter
• • ?
• • 去掉原有的引用直接使用就可以了，否則還是會打包
• • 具體步驟為
• • 1、引入
• • 在bulid/webpack.base.conf.js文件中，增加externals，將引用的外部模塊導入，如下：
• • module.exports = {
• • entry: {
• • app: './src/main.js'
• • },
• • externals:{
• • 'vue': 'Vue',
• • 'vue-router': 'VueRouter',
• • 'vuex':'Vuex'
• • }
• • ?
• • 2、在index.html中引入cdn。推薦引入 百度靜態資源庫的
• • 地址為：https://www.bootcdn.cn/
• • <body>
• • <div id="app"></div>
• • <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
• • <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
• • <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
• • </body>
• • ?
• • 注意一點：
• • 格式為 ‘aaa’ : 'bbb’, 其中，aaa表示要引入的資源的名字，bbb表示該模塊提供給外部引用的名字，由對應的庫自定。例如，vue為Vue，vue-router為VueRouter.
• • 3、去掉原有的引用
• • main.js中
• • // import Vue from ‘vue’
• • // import Router from ‘vue-router’
• • ?
• • 去掉Vue.use(XXX)，如：
• • // Vue.use(Router)
• • ?
• • 4、重新npm run build，會看到 vendor.js體積有所下降了
• • 通過開發者模式的Network工具，可以看到vue.js、vuex.js、vendor.js等文件會分別由一個線程進行加載。且因為使用了CDN，減輕了帶寬壓力。
• • ?
• • ?
• • 前流行的UI框架如iview,muse-ui,Element UI都支持按需加載,
• • ?
• • ?
• • gzip壓縮
• • ?
• • ?
• • 38、打包命令是什么？
• • 39、打包后會生成哪些文件？
• • 40、如何配置打包后生成的文件路徑錯誤問題
• • 41、簡述MVVM、MVP、MVC模式及區別
• • ?
• • MVVM
• • MVVM 是 Model-View-ViewModel 的縮寫。
• • Model代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。
• • View 代表UI 組件，它負責將數據模型轉化成UI 展現出來。
• • ViewModel 監聽模型數據的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。
• • 在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
• • ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。
• • ?
• • 42、MVVM模式的理解
• • ?
• • MVVM 由 Model、View、ViewModel 三部分構成，Model 層代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象。
• • 在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
• • ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM， 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。
• • ?
• • 43、Vue中的雙向數據綁定是如何實現的
• • ?
• • ?
• • ?
• • ?
• • ?
• • Vue雙向數據綁定實現原理
• • ?
• • 分成兩個進程，一個進程是對掛載目標元素模板里的v-model和{{ }}這兩個指令進行編譯（綠色）。另一個進程是對傳進去的data對象里面的數據進行監聽（紅色）。
• • 紅色：
• • ?
• • 當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部加上set和get訪問器，這樣在設置data的屬性值的時候，會觸發set方法，那么set方法主要有兩個作用，一是改變data里面的屬性值，二是發出數據變化的通知。Observer作為數據的觀察者，讓數據對象的讀寫操作都處于自己的監管之下，Dep作為Watcher(訂閱器)的收集者，當數據發生變化set會發出通知，會被Observer觀察到，然后由Dep通知到Watcher，最后更新視圖。
• • ?
• • 綠色：
• • 指令解析器Compile，對每個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，同樣由Dep進行收集，然后由Dep通知到Watcher，最后更新視圖。
• • 節點介紹
• • ?
• • 數據監聽器觀察者Observer，能夠對數據對象的所有屬性進行監聽，讓數據對象的讀寫操作都處于自己的監管之下，當數據發生變化set會發出通知，會被Observer觀察到，然后由Dep通知到Watcher，最后更新視圖。
• • 實現數據的雙向綁定，首先要對數據進行劫持監聽，所以我們需要設置一個監聽器Observer，用來監聽所有屬性
• • Watcher將數據監聽器和指令解析器連接起來，數據的屬性變動時，執行指令綁定的相應回調函數，
• • 1.如果屬性發上變化了，就需要告訴訂閱者Watcher看是否需要更新。
• • 指令解析器Compile，
• • 對每個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher
• • Dep：因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監聽器Observer和訂閱者Watcher之間進行統一管理的
• • ?
• • 43、Object.defineProperty()方法做什么用
• • 44、vue-cli中常用的配置
• • 45、簡述vue內部運作機制
• • 46、vuex內部運作機制
• • 47、axios內部運作機制
• • 48、vue-router內部運作機制
• • 49、在vue-cli中怎么使用scss
• • 50、vue和jquery有什么區別？
• • 51、vue的雙向數據綁定原理是什么？
• • 52、你是怎么理解組件化開發的
• • 53、簡述vue-cli每個目錄的作用
• • 54、為什么選擇vue？和其它框架對比的優劣勢在哪？
• • 55、route和router的區別
• • 56、vue兩個核心點是什么？
• • 數據驅動、組件系統
• • 57、用Vuex和不用vuex有什么區別？
• • 58、第一次頁面加載會觸發哪幾個鉤子
• • 59、v-model是什么？
• • 60、vue中的數組和原生js中的數組有什么區別？
• • 61、簡述$set及使用場景
• • 62、ajax應該放在組件中還是視圖中或是vuex中
• • 63、你覺得什么樣的項目比較適合用vue框架
• • 64、列舉vue中觸發視圖更新的方法
• • 65、Vue不能檢測數組或對象變動問題的解決方法有哪些
• • 66、vue-router，history模式下打包后訪問空白
• • 67、打包后訪問某個視圖，刷新404問題
• • 68、詳述虛擬DOM
• • 第一種：
• • 1、state數據
• • 2、JSX模板
• • 3、 數據 + 模板 結合，生成真實的DOM -> 視圖
• • 4、state發生了變化
• • 5、數據 + 模板 結合，生成真實的DOM，替換原始的DOM
• • 缺陷：
• • 1、第一次生成了完整的DOM片段
• • 2、第二次生成了完整的DOM片段
• • 3、第二次的DOM替換第一次的DOM，非常耗費性能
• • 第二種：
• • 1、state數據
• • 2、JSX模板
• • 3、數據 + 模板 結合， 生成真實的DOM -> 視圖
• • 4、state發生變化
• • 5、數據 + 模板 結合，生成真實的DOM，并不直接替換原始的DOM
• • 6、新的DOM（DocumentFragment）和原始的DOM做比對，找差異
• • 7、找出input框發生了變化
• • 8、只用新的DOM中的input元素，替換掉老的DOM中input元素
• • 缺陷：
• • 雖然DOM只是局部替換，但是在比對時候的計算是比較耗費性能的，因此，性能的提升并不明顯
• • 第三種：
• • 1、state數據
• • 2、JSX模板
• • 3、數據 + 模板 生成虛擬DOM(虛擬DOM就是一個JS對象，用它來描述真實DOM)（損耗一點性能）
• • 虛擬DOM：['div’, {id: 'abc’}, ['span’, '’, ‘hello world’]]
• • 4、用虛擬DOM的結構生成真實的DOM -> 視圖顯示
• • 真實DOM：
• • 5、state發生了變化
• • 6、數據 + 模板 生成新的虛擬DOM：['div’, {id: 'abc’}, ['span’, '’, ‘hi world’]]（極大提升性能）
• • 7、比較原始虛擬DOM和新的虛擬DOM的區別，找到的區別是span中的內容發生了變化（極大提升了性能）
• • 8、直接操作DOM，改變span中的內容
• • 總結：
• • 減少了真實DOM的創建及對比，創建都是JS對象，對比的也都是JS的對象，在JS底層實現了極大的性能飛越
• • 組件生成流程：
• • JSX -> JS對象(虛擬DOM) -> 真實的DOM
• • 用React.createElement改寫JSX模板：
• • JSX：return

    { item }

• • JSX -> JS對象(虛擬DOM) -> 真實的DOM
• • React.createElement('div’, {}, React.createElement('span’, {}, ‘item’))
• • JSX -> createElement -> JS對象(虛擬DOM) -> 真實的DOM
• • 虛擬DOM優點：
• • 1、性能提升了
• • 2、它使得跨端應用得以實現，Ract Native
• • React可以寫原生應用了，得益于React中的虛擬DOM，如果沒有虛擬DOM是不能寫原生應用的。原生系統是不支持DOM不存在DOm這個概念的，但是支持虛擬DOM（虛擬DOM就是一個JS對象）；虛擬DOM可以在瀏覽器端被解析為真實的DOM，在原生端可以被解析原生所支持的組件等格式
• • 69、詳述虛擬DOM中的diff算法
• • 虛擬DOM對比時，會用到diff算法
• • 虛擬DOM什么時候會被比對？
• • 當數據發生變化的時候就會被比對
• • 那什么時候數據會發生改變呢？
• • 要么改變了state，要么改變了props（props的改變其實是他的父組件的state發生了改變）
• • setState方法，其實是異步的，為什么是異步的？實際為了提升React底層的性能，假設：調用三次setState變更三組數據，大家想頁面會怎么做或者說React會怎么做？我們想的是React可能會做三次比對更新三次視圖。又假設三次更新間隔非常小，這樣會耗費性能，React可以把三次合并為一次，只去做一次虛擬DOM的比對，然后更新一次視圖，這樣的話就可以省去兩次比對性能上的耗費。
• • ?
• • ?
• • ?
• • ?
• • ?
• • ?
• • 同學們聽我說.png
• • ?
• • 同層比對，如果一致，那么繼續比對第二層，如果比對一樣了，繼續往下比對。
• • 如果比對到不一樣了，React會這么做，它不會再繼續往下比對了,而是從不一樣的這一層開始直接用新的覆蓋掉就得DOM節點，這樣的話豈不是性能并未得到最大提升？這樣的話會造成重復節點的浪費，。那這樣比對會有什么好處呢？同層比對帶來的好處就是比對的算法特別簡單，雖然可能會造成DOM上的重新渲染的浪費，但是大大的減少了虛擬DOM之間比對的算法上的性能消耗，所以React中采用了同層比對的算法。
• • ?
• • 遍歷時候key的問題：
• • ?
• • ?
• • ?
• • ?
• • ?
• • ?
• • 同學們聽我說
• • ?
• • 假如：數組中有五條數據，渲染到頁面，然后生成五個虛擬DOM樹，接下來我往里面增加了一條數據于是數據發生變化會生成一個新的虛擬DOM樹，然后我們會做兩個虛擬DOM的比對也就是上下進行比對匹配關系，如果每一個虛擬DOM的節點沒有一個key值，它就沒有一個自己的名字，當我們在做兩個虛擬DOM樹的比對的時候節點和節點之間的關系就很難被確立，我們得做兩層循環的比較，這樣的話比較起來就很麻煩了，當然也是很耗費性能的。
• • 我們可以這樣優化，假如我們在做DOM節點的循環的時候，我們可以給每個節點起個名字，A、B、C、D、E在第二次循環的時候我們有六個，以前的ABCDE還存在還是叫做ABCDE，我又增加了一個節點Z進來這個時候比對就很簡單了，我們根據他們的名字進行比對，馬上就能知道ABCDE都一致，可以繼續復用，只有Z不同，我們快速的建立關聯后把Z增加到這個DOM樹上就可以了。所以極大的提升了虛擬DOM比對的性能。
• • 如果提升性能有個前提我們盡量不要用下標，因為大家看按照下標的話右圖ABCDE，下面新的DOM樹ABCDE和上面的其實不再是對應的關系了，對導致key值不穩定，key值是變化的，失去了存在的意義了。那用什么比較合適呢？唯一不變化的、穩定的值。

• ?
• 70.ajax、axios、fetch之間的詳細區別以及優缺點

總結

以上是生活随笔為你收集整理的Vue面试题 70道题目及答案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。