1. Vue.js介紹

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

2.什么是 mvvm？

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

3.簡述Vue的響應式原理

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

4.Vue.js特點

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

5.scss是什么？

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

6.vue生命周期的理解？

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

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

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

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

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

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

三種。
一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進行判斷攔截。
第二種：組件內(nèi)的鉤子；
第三種：單獨路由獨享組件

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

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

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

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

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

assets文件夾是放靜態(tài)資源；components是放組件；router是定義路由相關(guān)的配置;view視圖；app.vue是一個應用主組件；main.js是入口文件

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

在我們運用vue的時候一定少不了用計算屬性computed和watch computed計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板里把數(shù)據(jù)綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動并且易于維護。
watch監(jiān)聽的是你定義的變量,當你定義的變量的值發(fā)生變化時，調(diào)用對應的方法。就好在div寫一個表達式name，data里寫入num和lastname,firstname,在watch里當num的值發(fā)生變化時，就會調(diào)用num的方法，方法里面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經(jīng)定義過的變量。

14.prop 驗證，和默認值

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

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},

15. vue 組件通信

父傳遞子
父：自定義屬性名 + 數(shù)據(jù)（要傳遞）=> :value="數(shù)據(jù)"
子：props ["父組件上的自定義屬性名“] =>進行數(shù)據(jù)接收)
子傳遞父
在父組件中注冊子組件并在子組件標簽上綁定自定義事件的監(jiān)聽。
子：this.$emit('自定義事件名稱', 數(shù)據(jù)) 子組件標簽上綁定@自定義事件名稱='回調(diào)函數(shù)'
父：methods: {自定義事件() {//邏輯處理} }
兄弟組件
通過中央通信 let bus = new Vue()
A：methods :{ 函數(shù){bus.$emit('自定義事件名'，數(shù)據(jù))} 發(fā)送
B：created （）{bus.$on('A發(fā)送過來的自定義事件名'，函數(shù))} 進行數(shù)據(jù)接收

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

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

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

Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。
有 5 種，分別是 state、getter、mutation、action、module
vuex 的 store 是什么？
vuex 就是一個倉庫，倉庫里放了很多對象。其中 state 就是數(shù)據(jù)源存放地，對應于一般 vue 對象里面的 datastate 里面存放的數(shù)據(jù)是響應式的，vue 組件從 store 讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變，依賴這相數(shù)據(jù)的組件也會發(fā)生更新它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性
vuex 的 getter 是什么？
getter 可以對 state 進行計算操作，它就是 store 的計算屬性雖然在組件內(nèi)也可以做計算屬性，但是 getters 可以在多給件之間復用如果一個狀態(tài)只在一個組件內(nèi)使用，是可以不用 getters
vuex 的 mutation 是什么？
更改Vuex的store中的狀態(tài)的唯一方法是提交mutation
vuex 的 action 是什么？
action 類似于 muation, 不同在于：action 提交的是 mutation,而不是直接變更狀態(tài)action 可以包含任意異步操作
vue 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 action 中
vuex 的 module 是什么？
面對復雜的應用程序，當管理的狀態(tài)比較多時；我們需要將vuex的store對象分割成模塊(modules)。

如果請求來的數(shù)據(jù)不是要被其他組件公用，僅僅在請求的組件內(nèi)使用，就不需要放入 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> 包裹動態(tài)組件時，會緩存不活動的組件實例,主要用于保留組件狀態(tài)或避免重新渲染。
大白話: 比如有一個列表和一個詳情，那么用戶就會經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那么就可以對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是重新渲染

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實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化后dom立即變化，而是按照一定的策略來進行dom更新。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM

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

可以。

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

24.v-on 常用修飾符

.stop 該修飾符將阻止事件向上冒泡。同理于調(diào)用 event.stopPropagation() 方法
.prevent 該修飾符會阻止當前事件的默認行為。同理于調(diào)用 event.preventDefault() 方法
.self 該指令只當事件是從事件綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)
.once 該修飾符表示綁定的事件只會被觸發(fā)一次

25.v-for key的作用。

當Vue用 v-for 正在更新已渲染過的元素列表是，它默認用“就地復用”策略。如果數(shù)據(jù)項的順序被改變，Vue將不是移動DOM元素來匹配數(shù)據(jù)項的改變，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。
為了給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。key屬性的類型只能為 string或者number類型。
key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。

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

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

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

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

28.Promise對象是什么？

1.Promise是異步編程的一種解決方案，它是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。promise對象是一個構(gòu)造函數(shù)，用來生成Promise實例；
2.promise的兩個特點    對象狀態(tài)不受外界影響 && 一旦狀態(tài)改變，就不會再變，任何時候都可以得到結(jié)果（pending狀態(tài)-->fulfilled || pending-->rejected）

29.axios的特點有哪些？

1、axios是一個基于promise的HTTP庫，支持promise的所有API；
2、它可以攔截請求和響應；
3、它可以轉(zhuǎn)換請求數(shù)據(jù)和響應數(shù)據(jù)，并對響應回來的內(nèi)容自動轉(zhuǎn)換為json類型的數(shù)據(jù)；
4、它安全性更高，客戶端支持防御XSRF；

30.vue中的 ref 是什么？

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

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

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

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

$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。
$router是'路由實例'對象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等。

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

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

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

babel-polyfill插件

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

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

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

1.將公用的JS庫通過script標簽外部引入，減小 app.bundel 的大小，讓瀏覽器并行下載資源文件，提高下載速度；
2.在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調(diào)用某個組件時再加載對應的js文件；
3.加一個首屏loading圖，提升用戶體驗；

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

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

調(diào)用方法：Vue.set( target, key, value )
target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
key：要更改的具體數(shù)據(jù)
value ：重新賦的值

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

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事件，在加載實例時觸發(fā)
created : 初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用
mounted : 掛載元素，獲取到DOM節(jié)點 updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應函數(shù)
beforeDestroy : 可以做一個確認停止事件的確認框

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

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

41.動態(tài)綁定class

active classname， isActive 變量

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

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

最新評論