1. Vue.js介紹

Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫，同時(shí)擁有非常容易上手的API；
Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫。
Vue.js是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開發(fā)。
簡而言之：Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡單的 API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

2.什么是 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)出來，ViewModel 是一個(gè)同步 View 和 Model 的對(duì)象。

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

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

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

簡潔：頁面由HTML模板+Json數(shù)據(jù)+Vue實(shí)例組成
數(shù)據(jù)驅(qū)動(dòng)：自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式
組件化：用可復(fù)用、解耦的組件來構(gòu)造頁面
輕量：代碼量小，不依賴其他庫
快速：精確有效批量DOM更新
模板友好：可通過npm，bower等多種方式安裝，很容易融入

5.scss是什么？

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

6.vue生命周期的理解？

總共分為 8 個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。
創(chuàng)建前/后： 在 beforeCreate 階段，vue 實(shí)例的掛載元素 el 還沒有。
載入前/后：在 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ù)，說明此時(shí) vue 實(shí)例已經(jīng)解除了事件監(jiān)聽以及和 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è)問題。

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.說出至少4種vue當(dāng)中的指令和它的用法？

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

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

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

12.請(qǐng)說出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ì)算屬性是用來聲明式的描述一個(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)聽的是你定義的變量,當(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)定義過的變量。

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
    },
},

15. vue 組件通信

父傳遞子
父：自定義屬性名 + 數(shù)據(jù)（要傳遞）=> :value="數(shù)據(jù)"
子：props ["父組件上的自定義屬性名“] =>進(jìn)行數(shù)據(jù)接收)
子傳遞父
在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽。
子：this.$emit('自定義事件名稱', 數(shù)據(jù)) 子組件標(biāo)簽上綁定@自定義事件名稱='回調(diào)函數(shù)'
父：methods: {自定義事件() {//邏輯處理} }
兄弟組件
通過中央通信 let bus = new Vue()
A：methods :{ 函數(shù){bus.$emit('自定義事件名'，數(shù)據(jù))} 發(fā)送
B：created （）{bus.$on('A發(fā)送過來的自定義事件名'，函數(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)用程序開發(fā)的狀態(tài)管理模式。
有 5 種，分別是 state、getter、mutation、action、module
vuex 的 store 是什么？
vuex 就是一個(gè)倉庫，倉庫里放了很多對(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ā)生更新它通過 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)求來的數(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指令是通過修改元素的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í)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁面，那么就可以對(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立即變化，而是按照一定的策略來進(jìn)行dom更新。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM

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

可以。

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

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 正在更新已渲染過的元素列表是，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的改變，而是簡單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(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)用父組件的方法

第一種方法是直接在子組件中通過this.$parent.event來調(diào)用父組件的方法 第二種方法是在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽這個(gè)事件就行了。

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

1.Promise是異步編程的一種解決方案，它是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語法上說，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來生成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庫，支持promise的所有API；
2、它可以攔截請(qǐng)求和響應(yīng)；
3、它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來的內(nèi)容自動(dòng)轉(zhuǎn)換為json類型的數(shù)據(jù)；
4、它安全性更高，客戶端支持防御XSRF；

30.vue中的 ref 是什么？

ref 被用來給元素或子組件注冊(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)求中；用來指導(dǎo)瀏覽器動(dòng)作，對(duì)服務(wù)端安全無用，hash不會(huì)重加載頁面。
hash 模式下:僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中，如 http://www.xxx.com，因此對(duì)于后端來說，即使沒有做到對(duì)路由的全覆蓋，也不會(huì)返回 404 錯(cuò)誤。
history模式：history采用HTML5的新特性；且提供了兩個(gè)新方法：pushState（），replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。
history 模式:前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對(duì) /items/id 的路由處理，將返回 404 錯(cuò)誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺(tái)配置支持……所以呢，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁面，這個(gè)頁面就是你 app 依賴的頁面。”

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的問題。

babel-polyfill插件

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

1.localStorage 存儲(chǔ)到本地再回去
2.重新獲取接口獲取數(shù)據(jù)

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

1.將公用的JS庫通過script標(biāo)簽外部引入，減小 app.bundel 的大小，讓瀏覽器并行下載資源文件，提高下載速度；
2.在配置 路由時(shí)，頁面和組件使用懶加載的方式引入，進(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
  })
}

39.簡述每個(gè)周期具體適合哪些場景

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 變量

<div v-bind:class="{ active: isActive }"></div>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。