• Vue面試題

• Vue.js介紹

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

• Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。

• Vue.js是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開(kāi)發(fā)。

• 簡(jiǎn)而言之：Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

• 2.什么是 mvvm？ MVC MVP MVVM

• MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設(shè)計(jì)思想。Model 層代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)出來(lái)，ViewModel 是一個(gè)同步 View 和 Model 的對(duì)象。

• 3.簡(jiǎn)述Vue的響應(yīng)式原理

• 當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)，vue會(huì)遍歷data選項(xiàng)的屬性，用 Object.defineProperty poroupoti 將它們轉(zhuǎn)為 getter/setter并且在內(nèi)部追蹤相關(guān)依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。 每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗?#xff0c;它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 wocher watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

• 4.Vue.js特點(diǎn)

• 簡(jiǎn)潔：頁(yè)面由HTML模板+Json數(shù)據(jù)+Vue實(shí)例組成

• 數(shù)據(jù)驅(qū)動(dòng)：自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式

• 組件化：用可復(fù)用、解耦的組件來(lái)構(gòu)造頁(yè)面

• 輕量：代碼量小，不依賴其他庫(kù)

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

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

• 5.scss是什么？

• 預(yù)處理css，把css當(dāng)前函數(shù)編寫，定義變量,嵌套.

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

• 總共分為 8 個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

• 創(chuàng)建前/后： 在 beforeCreate 階段，vue 實(shí)例的掛載元素 el 還沒(méi)有。 載入前/后：在 beforeMount 階段，vue 實(shí)例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節(jié)點(diǎn)，data.message 還未替換。在 mounted 階段，vue 實(shí)例掛載完成，data.message 成功渲染。 更新前/后：當(dāng) data 變化時(shí)，會(huì)觸發(fā) beforeUpdate 和 updated 方法。 銷毀前/后：在執(zhí)行 destroy 方法后，對(duì) data 的改變不會(huì)再觸發(fā)周期函數(shù)，說(shuō)明此時(shí) vue 實(shí)例已經(jīng)解除了事件監(jiān)聽(tīng)以及和 dom 的綁定，但是 dom 結(jié)構(gòu)依然存在。

• 7.為什么vue中data必須是一個(gè)函數(shù)？

• 對(duì)象為引用類型，當(dāng)重用組件時(shí)，由于數(shù)據(jù)對(duì)象都指向同一個(gè)data對(duì)象，當(dāng)在一個(gè)組件中修改data時(shí)，其他重用的組件中的data會(huì)同時(shí)被修改；而使用返回對(duì)象的函數(shù)，由于每次返回的都是一個(gè)新對(duì)象（Object的實(shí)例），引用地址不同，則不會(huì)出現(xiàn)這個(gè)問(wèn)題。

• 8.active-class是哪個(gè)組件的屬性？

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

• 9.vue-router有哪幾種導(dǎo)航鉤子？

• 三種。

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

• 第二種：組件內(nèi)的鉤子；

• 第三種：單獨(dú)路由獨(dú)享組件

• 10.說(shuō)出至少4種vue當(dāng)中的指令和它的用法？

• v-if：判斷是否隱藏；v-for：數(shù)據(jù)循環(huán)出來(lái)；v-bind:class：綁定一個(gè)屬性；v-model：實(shí)現(xiàn)雙向綁定

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

• 解析.vue文件的一個(gè)加載器，跟template/js/style轉(zhuǎn)換成js模塊。

• 12.請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

• assets文件夾是放靜態(tài)資源；

• components是放組件；

• router是定義路由相關(guān)的配置;

• view視圖；

• app.vue是一個(gè)應(yīng)用主組件；

• main.js是入口文件

• 13.計(jì)算屬性和watch的區(qū)別

• 在我們運(yùn)用vue的時(shí)候一定少不了用計(jì)算屬性computed和watch

• computed計(jì)算屬性是用來(lái)聲明式的描述一個(gè)值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個(gè)計(jì)算屬性上時(shí)，Vue 會(huì)在其依賴的任何值導(dǎo)致該計(jì)算屬性改變時(shí)更新 DOM。這個(gè)功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動(dòng)并且易于維護(hù)。

• watch監(jiān)聽(tīng)的是你定義的變量,當(dāng)你定義的變量的值發(fā)生變化時(shí)，調(diào)用對(duì)應(yīng)的方法。就好在div寫一個(gè)表達(dá)式name，data里寫入num和lastname,firstname,在watch里當(dāng)num的值發(fā)生變化時(shí)，就會(huì)調(diào)用num的方法，方法里面的形參對(duì)應(yīng)的是num的新值和舊值，而計(jì)算屬性computed,計(jì)算的是Name依賴的值,它不能計(jì)算在data中已經(jīng)定義過(guò)的變量。

• 14.prop 驗(yàn)證，和默認(rèn)值

• 我們?cè)诟附M件給子組件傳值得時(shí)候，為了避免不必要的錯(cuò)誤，可以給prop的值進(jìn)行類型設(shè)定，讓父組件給子組件傳值得時(shí)候，更加準(zhǔn)確，prop可以傳一個(gè)數(shù)字，一個(gè)布爾值，一個(gè)數(shù)組，一個(gè)對(duì)象，以及一個(gè)對(duì)象的所有屬性。組件可以為 props 指定驗(yàn)證要求。如果未指定驗(yàn)證要求，Vue 會(huì)發(fā)出警告比如傳一個(gè)number類型的數(shù)據(jù)，用defalt設(shè)置它的默認(rèn)值，如果驗(yàn)證失敗的話就會(huì)發(fā)出警告。

• props: {

• visible: {

• default: true,

• type: Boolean,

• required: true

• },

• },

• ?

• vue 組件通信

• 父?jìng)鬟f子

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

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

• ?

• 子傳遞父

• 在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽(tīng)。

• 子：this.$emit(‘自定義事件名稱’, 數(shù)據(jù)) 子組件標(biāo)簽上綁定@自定義事件名稱=’回調(diào)函數(shù)’

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

• ?

• 兄弟組件

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

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

• B：created （）{bus.$on('A發(fā)送過(guò)來(lái)的自定義事件名’，函數(shù))} 進(jìn)行數(shù)據(jù)接收

• 16.vue路由傳參數(shù)

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

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

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

• Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。

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

• ?

• vuex 的 store 是什么？

• vuex 就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里放了很多對(duì)象。其中 state 就是數(shù)據(jù)源存放地，對(duì)應(yīng)于一般 vue 對(duì)象里面的 datastate 里面存放的數(shù)據(jù)是響應(yīng)式的，vue 組件從 store 讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變，依賴這相數(shù)據(jù)的組件也會(huì)發(fā)生更新它通過(guò) mapState 把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性

• vuex 的 getter 是什么？

• getter 可以對(duì) state 進(jìn)行計(jì)算操作，它就是 store 的計(jì)算屬性雖然在組件內(nèi)也可以做計(jì)算屬性，但是 getters 可以在多給件之間復(fù)用如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用 getters

• vuex 的 mutation 是什么？

• 更改Vuex的store中的狀態(tài)的唯一方法是提交mutation

• vuex 的 action 是什么？

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

• vuex 的 module 是什么？

• 面對(duì)復(fù)雜的應(yīng)用程序，當(dāng)管理的狀態(tài)比較多時(shí)；我們需要將vuex的store對(duì)象分割成模塊(modules)。

• 如果請(qǐng)求來(lái)的數(shù)據(jù)不是要被其他組件公用，僅僅在請(qǐng)求的組件內(nèi)使用，就不需要放入 vuex 的 state 里如果被其他地方復(fù)用，請(qǐng)將請(qǐng)求放入 action 里，方便復(fù)用，并包裝成 promise 返回

• 18.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)？

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

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

• 19.如何讓CSS只在當(dāng)前組件中起作用？

• 將當(dāng)前組件的<style>修改為<style scoped>

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

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

• 21.delete和Vue.delete刪除數(shù)組的區(qū)別？

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

• 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實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化后dom立即變化，而是按照一定的策略來(lái)進(jìn)行dom更新。

• $nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM

• 23.v-on可以監(jiān)聽(tīng)多個(gè)方法嗎？

• 可以。

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

• 復(fù)制代碼

• 24.v-on 常用修飾符

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

• .prevent 該修飾符會(huì)阻止當(dāng)前事件的默認(rèn)行為。同理于調(diào)用 event.preventDefault() 方法

• .self 該指令只當(dāng)事件是從事件綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)

• .once 該修飾符表示綁定的事件只會(huì)被觸發(fā)一次

• 25.v-for key的作用。

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

• ?

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

• 26.v-for 與 v-if 的優(yōu)先級(jí)

• v-for比v-if優(yōu)先，如果每一次都需要遍歷整個(gè)數(shù)組，將會(huì)影響速度，尤其是當(dāng)之需要渲染很小一部分的時(shí)候。

• 27.Vue子組件調(diào)用父組件的方法

• 第一種方法是直接在子組件中通過(guò)this.$parent.event來(lái)調(diào)用父組件的方法

• 第二種方法是在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這個(gè)事件就行了。

• 28.Promise對(duì)象是什么？

• 1.Promise是異步編程的一種解決方案，它是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例；

• 2.promise的兩個(gè)特點(diǎn) 對(duì)象狀態(tài)不受外界影響 && 一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到結(jié)果（pending狀態(tài)–>fulfilled || pending–>rejected）

• 29.axios的特點(diǎn)有哪些？

• 1、axios是一個(gè)基于promise的HTTP庫(kù)，支持promise的所有API；

• 2、它可以攔截請(qǐng)求和響應(yīng)；

• 3、它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來(lái)的內(nèi)容自動(dòng)轉(zhuǎn)換為json類型的數(shù)據(jù)；

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

• 30.vue中的 ref 是什么？

• ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例。

• 31.Vue的路由模式,實(shí)現(xiàn)方式？

• hash模式 和 history模式

• hash模式：在瀏覽器中符號(hào)“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取； 特點(diǎn)：hash雖然在URL中，但不被包括在HTTP請(qǐng)求中；用來(lái)指導(dǎo)瀏覽器動(dòng)作，對(duì)服務(wù)端安全無(wú)用，hash不會(huì)重加載頁(yè)面。 hash 模式下:僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如?http://www.xxx.com，因此對(duì)于后端來(lái)說(shuō)，即使沒(méi)有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤。

• history模式：history采用HTML5的新特性；且提供了兩個(gè)新方法：pushState（），replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽(tīng)到狀態(tài)變更。

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

• 32.$route和$router的區(qū)別？

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

• $router是’路由實(shí)例’對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等。

• 33.vue.js的兩個(gè)核心是什么？

• 數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)

• 34.vue如何兼容ie的問(wèn)題。

• babel-polyfill插件

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

• 1.localStorage 存儲(chǔ)到本地再回去

• 2.重新獲取接口獲取數(shù)據(jù)

• 36.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問(wèn)題？

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

• 2.在配置 路由時(shí)，頁(yè)面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用 某個(gè)組件時(shí)再加載對(duì)應(yīng)的js文件；

• 3.加一個(gè)首屏loading圖，提升用戶體驗(yàn)；

• 37.Vue 改變數(shù)組觸發(fā)視圖更新

• 以下方法調(diào)用會(huì)改變?cè)紨?shù)組：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )

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

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

• key：要更改的具體數(shù)據(jù)

• value ：重新賦的值

• 38.DOM 渲染在哪個(gè)周期中就已經(jīng)完成？

• mounted

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

• mounted: function () {

• this.$nextTick(function () {

• // Code that will run only after the

• // entire view has been rendered

• })

• }

• 復(fù)制代碼

• 39.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景

• beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)

• created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用

• mounted : 掛載元素，獲取到DOM節(jié)點(diǎn) updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)

• beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框

• 40.第一次加載會(huì)觸發(fā)哪幾個(gè)鉤子？

• 會(huì)觸發(fā)beforeCreate , created ,beforeMount ,mounted

• 41.動(dòng)態(tài)綁定class

• active classname， isActive 變量

• ?

• 復(fù)制代碼

• ?

• ?

• ?

• ?

• ?

• 1、vue是一套漸進(jìn)式框架的理解

• ?

• 在我看來(lái)，漸進(jìn)式代表的含義是：主張最少。

• 每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，從而會(huì)對(duì)使用者有一定的要求，這些要求就是主張，主張有強(qiáng)有弱，它的強(qiáng)勢(shì)程度會(huì)影響在業(yè)務(wù)開(kāi)發(fā)中的使用方式。

• 比如說(shuō)，Angular，它兩個(gè)版本都是強(qiáng)主張的，如果你用它，必須接受以下東西：

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

• 所以Angular是帶有比較強(qiáng)的排它性的，如果你的應(yīng)用不是從頭開(kāi)始，而是要不斷考慮是否跟其他東西集成，這些主張會(huì)帶來(lái)一些困擾。

• 比如React，它也有一定程度的主張，它的主張主要是函數(shù)式編程的理念，比如說(shuō)，你需要知道什么是副作用，什么是純函數(shù)，如何隔離副作用。它的侵入性看似沒(méi)有Angular那么強(qiáng)，主要因?yàn)樗擒浶郧秩搿?/li>

• Vue可能有些方面是不如React，不如Angular，但它是漸進(jìn)的，沒(méi)有強(qiáng)主張，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用；也可以整個(gè)用它全家桶開(kāi)發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。你可以在底層數(shù)據(jù)邏輯的地方用OO和設(shè)計(jì)模式的那套理念，也可以函數(shù)式，都可以，它只是個(gè)輕量視圖而已，只做了自己該做的事，沒(méi)有做不該做的事，僅此而已。

• 漸進(jìn)式的含義，我的理解是：沒(méi)有多做職責(zé)之外的事。

• ?

• 2、Vue常用的指令

• 3、v-if VS v-show區(qū)別

• 4、Vue常用修飾符

• 5、v-on可以監(jiān)聽(tīng)多個(gè)方法嗎

• 可以，代碼如下：

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

• ?

• 6、vue中key值的作用

• ?

• 需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)。

• 其實(shí)不只是vue，react中在執(zhí)行列表渲染時(shí)也會(huì)要求給每個(gè)組件添加上key這個(gè)屬性。

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

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

• ?

• ?

• 虛擬DOM見(jiàn)“68題” ，diff算法見(jiàn)“69題”

• ?

• 7、$nextTick的作用

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

• 當(dāng)我們定義一個(gè) 組件時(shí)( <button-counter>)，你可能會(huì)發(fā)現(xiàn)它的 data 并不是像這樣直接提供一個(gè)對(duì)象：

• data: {

• count: 0

• }

• ?

• 取而代之的是，一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝：

• data: function () {

• return {

• count: 0

• }

• }

• ?

• 9、v-for和v-if的優(yōu)先級(jí)

• 當(dāng)它們處于同一節(jié)點(diǎn)，v-for 的優(yōu)先級(jí)比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中。當(dāng)你想為僅有的一些項(xiàng)渲染節(jié)點(diǎn)時(shí)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用。

• 10、詳述組件通信

• 11、keep-alive組件的作用

• 當(dāng)在這些組件之間切換的時(shí)候，你有時(shí)會(huì)想保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問(wèn)題。例如我們來(lái)展開(kāi)說(shuō)一說(shuō)這個(gè)多標(biāo)簽界面：

• ?

• ?

• ?

• ?

• ?

• ?

• 未使用keep-alive.gif

• ?

• 你會(huì)注意到，如果你選擇了一篇文章，切換到 Archive 標(biāo)簽，然后再切換回 Posts，是不會(huì)繼續(xù)展示你之前選擇的文章的。這是因?yàn)槟忝看吻袚Q新標(biāo)簽的時(shí)候，Vue 都創(chuàng)建了一個(gè)新的 currentTabComponent 實(shí)例。

• ?

• 重新創(chuàng)建動(dòng)態(tài)組件的行為通常是非常有用的，但是在這個(gè)案例中，我們更希望那些標(biāo)簽的組件實(shí)例能夠被在它們第一次被創(chuàng)建的時(shí)候緩存下來(lái)。為了解決這個(gè)問(wèn)題，我們可以用一個(gè) <keep-alive> 元素將其動(dòng)態(tài)組件包裹起來(lái)。

• ?

• <keep-alive>

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

• </keep-alive>

• ?

• ?

• ?

• ?

• ?

• ?

• 使用了keep-alive.gif

• ?

• 現(xiàn)在這個(gè) Posts 標(biāo)簽保持了它的狀態(tài) (被選中的文章) 甚至當(dāng)它未被渲染時(shí)也是如此

• ?

• 12、Vue生命周期詳解

• ?

• 什么是Vue的生命周期

• Vue實(shí)例有一個(gè)完整的生命周期，也就是說(shuō)從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM、渲染-更新-渲染、卸載等一系列過(guò)程，我們稱為Vue實(shí)例的生命周期。鉤子就是在某個(gè)階段給你一個(gè)做某些處理的機(jī)會(huì)。

• 生命周期的作用

• 就是在某個(gè)階段給你一個(gè)做某些處理的機(jī)會(huì)。

• 生命周期總共有幾個(gè)階段

• beforeCreate（創(chuàng)建前）：在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和事件配置之前被調(diào)用，此時(shí)組件的選項(xiàng)對(duì)象還未創(chuàng)建，因此無(wú)法訪問(wèn)methods，data，computed等上的方法和數(shù)據(jù)。

• created（創(chuàng)建后）：實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用，在這一步，實(shí)例已完成了以下配置：數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算，watch/event事件回調(diào)。然而，掛載階段還沒(méi)有開(kāi)始，$el屬性目前不可見(jiàn)。created鉤子可以獲取Vue的data，調(diào)用Vue方法，獲取原本HTML上的直接加載出來(lái)的DOM，但是無(wú)法獲取到通過(guò)掛載模板生成的DOM。這是一個(gè)常用的生命周期，因?yàn)槟憧梢哉{(diào)用methods中的方法、改變data中的數(shù)據(jù)，并且修改可以通過(guò)vue的響應(yīng)式綁定體現(xiàn)在頁(yè)面上、獲取computed中的計(jì)算屬性等等。通常我們可以在這里對(duì)實(shí)例進(jìn)行預(yù)處理。也有一些童鞋喜歡在這里發(fā)ajax請(qǐng)求，值得注意的是，這個(gè)周期中是沒(méi)有什么方法來(lái)對(duì)實(shí)例化過(guò)程進(jìn)行攔截的。因此假如有某些數(shù)據(jù)必須獲取才允許進(jìn)入頁(yè)面的話，并不適合在這個(gè)頁(yè)面發(fā)請(qǐng)求。

• 建議在組件路由勾子beforeRouteEnter中來(lái)完成。

• beforeMonut：掛載開(kāi)始之前被調(diào)用：虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染，在這里也可以更改數(shù)據(jù)，相關(guān)的 render 函數(shù)首次被調(diào)用（虛擬DOM），實(shí)例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。注意此時(shí)還沒(méi)有掛載html到頁(yè)面上。

• mounted[?ma?nt?d]：掛載完成，也就是模板中的HTML渲染到了HTML頁(yè)面中，此時(shí)一般可以做一些ajax操作，組件已經(jīng)出現(xiàn)在頁(yè)面中，數(shù)據(jù)、真實(shí)dom都已經(jīng)處理好了，事件都已經(jīng)掛載好了mounted只會(huì)執(zhí)行一次。

• beforeUpdate（更新前）：在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建虛擬dom與上一次的虛擬dom樹(shù)利用diff算法進(jìn)行對(duì)比之后重新渲染。

• updated[?p’de?t?d]（更新后）：在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時(shí)，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

• beforeDestroy[d??str??]（銷毀前）：在實(shí)例銷毀之前調(diào)用。實(shí)例仍然完全可用。1.這一步還可以用this來(lái)獲取實(shí)例。2.一般在這一步做一些重置的操作。比如清除掉組件中的 定時(shí)器 和 監(jiān)聽(tīng)的dom事件。

• destroyed[d?s’tr??d]（銷毀后）：在實(shí)例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

• 第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子

• beforeCreate

• DOM 渲染在哪個(gè)周期中就已經(jīng)完成

• mounted

• 生命周期使用場(chǎng)景舉例

• beforeCreate：可以在這里加一個(gè)loading

• created：loading結(jié)束做一些初始化操作

• mounted：ajax請(qǐng)求，配合路由鉤子做一些事情

• beforeDestory：你確認(rèn)刪除嗎？

• destoryed：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容

• ?

• 13、Vue如何監(jiān)聽(tīng)鍵盤事件中的按鍵

• 14、Vue中的過(guò)濾器有什么用？

• Vue.js 允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示

• 15、單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

• 單頁(yè)面應(yīng)用（SPA），通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用，瀏覽器一開(kāi)始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中。但在寫的時(shí)候，還是會(huì)分開(kāi)寫（頁(yè)面片段），然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新局部資源。多應(yīng)用于pc端。

• 多頁(yè)面（MPA），就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面，頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新

• ?

• 單頁(yè)面的優(yōu)點(diǎn)：

• ?

• ?

• 用戶體驗(yàn)好，快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較小

• 前后端分離

• 頁(yè)面效果會(huì)比較炫酷（比如切換頁(yè)面內(nèi)容時(shí)的專場(chǎng)動(dòng)畫）

• ?

• ?

• 單頁(yè)面缺點(diǎn)：

• ?

• ?

• 不利于seo

• 導(dǎo)航不可用，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)、后退。（由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能，所以需要自己建立堆棧管理）

• 初次加載時(shí)耗時(shí)多

• 頁(yè)面復(fù)雜度提高很多

• ?

• ?

• ?

• ?

• 姓名

• 單頁(yè)面應(yīng)用（SinglePage Web Application，SPA）

• 多頁(yè)面應(yīng)用（MultiPage Application，MPA）

• ?

• ?

• ?

• ?

• 組成

• 一個(gè)外殼頁(yè)面和多個(gè)頁(yè)面片段組成

• 多個(gè)完整頁(yè)面構(gòu)成

• ?

• ?

• 資源共用(css,js)

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

• 不共用，每個(gè)頁(yè)面都需要加載

• ?

• ?

• 刷新方式

• 頁(yè)面局部刷新或更改

• 整頁(yè)刷新

• ?

• ?

• url 模式

• a.com/#/pageone

• a.com/pageone.html

• ?

• ?

• 用戶體驗(yàn)

• 頁(yè)面片段間的切換快，用戶體驗(yàn)良好

• 頁(yè)面切換加載緩慢，流暢度不夠，用戶體驗(yàn)比較差

• ?

• ?

• 轉(zhuǎn)場(chǎng)動(dòng)畫

• 容易實(shí)現(xiàn)

• 無(wú)法實(shí)現(xiàn)

• ?

• ?

• 數(shù)據(jù)傳遞

• 容易

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

• ?

• ?

• 搜索引擎優(yōu)化(SEO)

• 需要單獨(dú)方案、實(shí)現(xiàn)較為困難、不利于SEO檢索 可利用服務(wù)器端渲染(SSR)優(yōu)化

• 實(shí)現(xiàn)方法簡(jiǎn)易

• ?

• ?

• 試用范圍

• 高要求的體驗(yàn)度、追求界面流暢的應(yīng)用

• 適用于追求高度支持搜索引擎的應(yīng)用

• ?

• ?

• 開(kāi)發(fā)成本

• 較高，常需借助專業(yè)的框架

• 較低 ，但頁(yè)面重復(fù)代碼多

• ?

• ?

• 維護(hù)成本

• 相對(duì)容易

• 相對(duì)復(fù)雜

• ?

• ?

• ?

• 16、什么是計(jì)算屬性？什么情況使用？

• 模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)，例如：

• ?

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

• ?

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

    { item }

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

• ?
• 70.ajax、axios、fetch之間的詳細(xì)區(qū)別以及優(yōu)缺點(diǎn)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。