今天給各位分享vue移動(dòng)端面試題的知識(shí)，其中也會(huì)對(duì)vue基礎(chǔ)面試題進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、三十七個(gè)常見Vue面試題
• 2、史上最全前端vue面試題！推薦收藏
• 3、vue常見面試題（3）

三十七個(gè)常見Vue面試題

映射關(guān)系簡(jiǎn)化，隱藏controller MVVM在MVC的基礎(chǔ)上，把控制層隱藏掉了。

Vue不是一個(gè)MVVM框架，它是一個(gè)視圖層框架。

ViewModal是一個(gè)橋梁，將數(shù)據(jù)和視圖進(jìn)行關(guān)聯(lián)。

數(shù)組和對(duì)象類型的值變化的時(shí)候，通過defineReactive方法，借助了defineProperty，將所有的屬性添加了getter和setter。用戶在取值和設(shè)置的時(shí)候，可以進(jìn)行一些操作。

缺陷：只能監(jiān)控最外層的屬性，如果是多層的，就要進(jìn)行全量遞歸。

get里面會(huì)做依賴搜集（dep[watcher, watcher]） set里面會(huì)做數(shù)據(jù)更新（notify，通知watcher更新）

vue中對(duì)數(shù)組沒有進(jìn)行defineProperty，而是重寫了數(shù)組的7個(gè)方法。 分別是：

因?yàn)檫@些方法都會(huì)改變數(shù)組本身。

數(shù)組里的索引和長(zhǎng)度是無法被監(jiān)控的。

Vue初始化的時(shí)候，掛載之后會(huì)進(jìn)行編譯。生成renderFunction。

當(dāng)取值的時(shí)候，就會(huì)搜集watcher，放到dep里面。

當(dāng)用戶更改值的時(shí)候，就會(huì)通知watcher，去更新視圖。

這個(gè)問題的核心是如何將template轉(zhuǎn)換成render函數(shù)。

Vue的生命周期鉤子是回調(diào)函數(shù)，當(dāng)創(chuàng)建組件實(shí)例的過程中會(huì)調(diào)用相應(yīng)的鉤子方法。 內(nèi)部會(huì)對(duì)鉤子進(jìn)行處理，將鉤子函數(shù)維護(hù)成數(shù)組的形式。

Vue的mixin的作用就是抽離公共的業(yè)務(wù)邏輯，原理類似對(duì)象的繼承，當(dāng)組件初始化的時(shí)候，會(huì)調(diào)用mergeOptions方法進(jìn)行合并，采用策略模式針對(duì)不同的屬性進(jìn)行合并。 如果混入的數(shù)據(jù)和本身組件的數(shù)據(jù)有沖突，采用本身的數(shù)據(jù)為準(zhǔn)。

缺點(diǎn)：命名沖突、數(shù)據(jù)來源不清晰

new Vue是一個(gè)單例模式，不會(huì)有任何的合并操作，所以根實(shí)例不必校驗(yàn)data一定是一個(gè)函數(shù)。 組件的data必須是一個(gè)函數(shù)，是為了防止兩個(gè)組件的數(shù)據(jù)產(chǎn)生污染。 如果都是對(duì)象的話，會(huì)在合并的時(shí)候，指向同一個(gè)地址。 而如果是函數(shù)的時(shí)候，合并的時(shí)候調(diào)用，會(huì)產(chǎn)生兩個(gè)空間。

nextTick是一個(gè)微任務(wù)。

Vue的diff算法是平級(jí)比較，不考慮跨級(jí)比較的情況。內(nèi)部采用深度遞歸的方式+雙指針方式比較

所以采用watcher + Diff算法來檢測(cè)差異。

產(chǎn)生組件虛擬節(jié)點(diǎn) - 創(chuàng)建組件的真實(shí)節(jié)點(diǎn) - 插入到頁面

屬性更新會(huì)觸發(fā)patchVnode方法，組件的虛擬節(jié)點(diǎn)會(huì)調(diào)用prepatch鉤子，然后更新屬性，更新組件。

先渲染異步占位符節(jié)點(diǎn) - 組件加載完畢后調(diào)用forceUpdate強(qiáng)制更新。

正常的一個(gè)組件是一個(gè)類繼承了Vue。

函數(shù)式組件，就是一個(gè)普通的函數(shù)。

主要作用是為了實(shí)現(xiàn)批量傳遞數(shù)據(jù)。

provide/inject更適合應(yīng)用在插件中，主要實(shí)現(xiàn)跨級(jí)數(shù)據(jù)傳遞。

首先，v-for和v-if 不能在同一個(gè)標(biāo)簽中使用。

先處理v-for，再處理v-if。

如果同時(shí)遇到的時(shí)候，應(yīng)該考慮先用計(jì)算屬性處理數(shù)據(jù)，在進(jìn)行v-for，可以減少循環(huán)次數(shù)。

在組件上用的v-model，是model和callback

在普通元素上用v-model，會(huì)生成指令，還可能因?yàn)椴煌脑兀?/p>

指令在什么時(shí)候會(huì)調(diào)用？

源碼：

普通插槽是渲染后做替換的工作。父組件渲染完畢后，替換子組件的內(nèi)容。

在模板編譯的時(shí)候，處理組件中的子節(jié)點(diǎn)和slot標(biāo)簽

在創(chuàng)建元素的時(shí)候，用_t()方法方法來替換_v()的內(nèi)容。

作用域插槽可以拿到子組件里面的屬性。在子組件中傳入屬性然后渲染。

作用域插槽的編譯結(jié)果：

Vue.use是用來使用插件的。我們可以在插件中擴(kuò)展全局組件、指令、原型方法等。 會(huì)調(diào)用install方法將Vue的構(gòu)建函數(shù)默認(rèn)傳入，在插件中可以使用vue，無需依賴vue庫

使用有兩個(gè)場(chǎng)景，一個(gè)是動(dòng)態(tài)組件，一個(gè)是router-view

這里創(chuàng)建了一個(gè)白名單和一個(gè)黑名單。表明哪些需要需要做緩存，哪些不需要做緩存。以及最大的緩存?zhèn)€數(shù)。

緩存的是組件的實(shí)例，用key和value對(duì)象保存。

加載的時(shí)候，監(jiān)控include和exclude。

如果不需要緩存，直接返回虛擬節(jié)點(diǎn)。

如果需要緩存，就用組件的id和標(biāo)簽名，生成一個(gè)key，把當(dāng)前vnode的instance作為value，存成一個(gè)對(duì)象。這就是緩存列表

如果設(shè)置了最大的緩存數(shù)，就刪除第0個(gè)緩存。新增最新的緩存。

并且給組件添加一個(gè)keepAlive變量為true，當(dāng)組件初始化的時(shí)候，不再初始化。

鉤子函數(shù)有三種：

Vuex是專門為vue提供的全局狀態(tài)管理系統(tǒng)，用于多個(gè)組件中的數(shù)據(jù)共享、數(shù)據(jù)緩存。

問題：無法持久化。

史上最全前端vue面試題！推薦收藏

1.為什么會(huì)形成跨域？

不是一個(gè)源的文件操作另一個(gè)源的文件就會(huì)形成跨域。當(dāng)請(qǐng)求端的協(xié)議、域名、端口號(hào)和服務(wù)器的協(xié)議、域名、端口號(hào)有一個(gè)不一致就會(huì)發(fā)生跨域。

解決方法：安裝插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue組件里面，通過dispatch來出發(fā)actions提交修改數(shù)據(jù)的操作。

② 然后再通過actions的commit來出發(fā)mutations來修改數(shù)據(jù)。

③ mutations接收到commit的請(qǐng)求，就會(huì)自動(dòng)通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。

④ 最后由store觸發(fā)每一個(gè)調(diào)用它的組件更新。

3.vuex是什么？怎么使用？

vuex是一個(gè)專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。使用:store,getters,mutations,actions,modules詳細(xì)使用寫法請(qǐng)見：

4.vuex中的數(shù)據(jù)在頁面刷新后數(shù)據(jù)消失怎么解決？

使用sessionStorage或localStorage存儲(chǔ)數(shù)據(jù);也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默認(rèn)行為？

在綁定事件時(shí)，在指令后邊加上修飾符.stop來阻止冒泡，.prevent來阻止默認(rèn)行為

6.深拷貝與淺拷貝？

假設(shè)B復(fù)制A，修改A的時(shí)候，看B是否變化：B變了是淺拷貝（修改堆內(nèi)存中的同一個(gè)值），沒變是深拷貝（修改堆內(nèi)存中不同的值）。淺拷貝只是增加了一個(gè)指針指向已存在的內(nèi)存地址，深拷貝是增加了一個(gè)指針并申請(qǐng)了一個(gè)新的內(nèi)存，使這個(gè)增加的指針指向這個(gè)新的內(nèi)存。深拷貝和淺拷貝最根本的區(qū)別在于是否真正獲取一個(gè)對(duì)象的復(fù)制實(shí)體，而不是引用。

7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）組件是否激活調(diào)用

8. keep-alive: 組件緩存

router.js中:

meta: {keepAlive:true} // 需要被緩存

鉤子執(zhí)行順序：created - mounted - actived

include表示需要緩存的頁面；exclude表示不需要緩存的頁面。如果兩個(gè)同時(shí)設(shè)置，exclude優(yōu)先級(jí)更 改，則組件不會(huì)被緩存。

應(yīng)用場(chǎng)景： 用戶在某個(gè)列表頁面選擇篩選條件過濾出一份數(shù)據(jù)列表，由列表頁面進(jìn)入數(shù)據(jù)詳情頁面，再返回 該列表頁，我們希望列表頁可以保留用戶的篩選狀態(tài)。

9.vue傳值方式？

props $emit() $on() $parent $children $listener $attr

10. $on 兄弟組件傳值

$emit 分發(fā)

$on 監(jiān)聽

$off 取消監(jiān)聽

$once 一次性監(jiān)聽一個(gè)事件

在js文件中定義一個(gè)中央事件總線Bus，并暴露出來

具體的實(shí)現(xiàn)方式：

使用Bus的時(shí)候在接收Bus的組件的beforeDestroy函數(shù)中銷毀Bus，否則會(huì)一直疊加調(diào)用這個(gè)方法。

應(yīng)用場(chǎng)景：“退出登錄” - ①點(diǎn)擊退出登錄；②修改密碼后自動(dòng)退出登錄

11.組件跨級(jí)傳值

$attrs a-b-c

$listeners 監(jiān)聽

12.vue事件修飾符有哪些？

.stop .prevent .self .once .passive .sync

13.箭頭函數(shù)中的this？

不具有this綁定，但函數(shù)體可以使用this，這個(gè)this指向的是箭頭函數(shù)當(dāng)前所處的詞法環(huán)境中的this對(duì)象。

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

如果不是函數(shù)的話，每個(gè)組件的data都是內(nèi)存的同一個(gè)地址，一個(gè)數(shù)據(jù)改變了其他也改變了，當(dāng)他是一個(gè)函數(shù)時(shí)，每個(gè)組件實(shí)例都有自己的作用域，每個(gè)實(shí)例相互獨(dú)立，就不會(huì)互相影響。

16.v-if 和 v-show區(qū)別？

v-if 是對(duì)標(biāo)簽的創(chuàng)建與銷毀， v-show 則僅在初始化時(shí)加載一次，v-if 開銷相對(duì)來說比v-show 大；

v-if 是惰性的；v-show 做的僅是簡(jiǎn)單的css切換。

17.v-text 與 v-html區(qū)別？

v-text 用于普通文本，不能解析html；

v-html 反之。

18.v-for key的作用？

使用v-for更新渲染過的數(shù)據(jù)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序改變，vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的改變，而是簡(jiǎn)單地復(fù)用此處每個(gè)元素，并確保在特定索引下顯示已被渲染過的每個(gè)元素。key屬性類型只能是string或number。

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

19.Scss是什么？在vue-cli中安裝步驟？有哪幾大特性？

npm 下載loader （sass-loader,css-loader,node-sass）,在webpack中配置extends屬性（加.scss拓展） Vscode中可在擴(kuò)展中下載;

特性：可以用變量，可以用混合器，可以嵌套等。

20.vue獲取dom？

ref

21.vue初始化頁面閃動(dòng)問題？

webpack、vue-router

v-cloak css:[v-cloak]:display:none

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模塊化 基于組件路由配置，路由參數(shù)、查詢、通配符，細(xì)粒度導(dǎo)航控制，自定義的滾動(dòng)條行為等。

23.vue路由傳參，接收？

傳： this.$router.push({path:'', query(params):{}})

接：this.$router.query.xxx

24.防抖和節(jié)流？

節(jié)流是一定時(shí)間內(nèi)執(zhí)行一次函數(shù)，多用在scroll事件上；

防抖是在一定時(shí)間內(nèi)執(zhí)行最后一次的函數(shù)，多用在input輸入操作，表單提交等。

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

vue常見面試題（3）

1. 什么是vue的計(jì)算屬性computed

計(jì)算屬性是需要復(fù)雜的邏輯，可以用方法method代替

2.vue-cli提供的幾種腳手架模板

vue-cli 的腳手架項(xiàng)目模板有browserify 和 webpack；

3.組件中傳遞數(shù)據(jù)？

4. vue-router實(shí)現(xiàn)路由懶加載（ 動(dòng)態(tài)加載路由 ）

5. vue-router 的導(dǎo)航鉤子,主要用來作用是攔截導(dǎo)航,讓他完成跳轉(zhuǎn)或取消

6. 完整的 vue-router 導(dǎo)航解析流程

7. vue-router如何響應(yīng) 路由參數(shù) 的變化？

原來的組件實(shí)例會(huì)被復(fù)用。這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。你可以簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：

8.vue-router的幾種實(shí)例方法以及參數(shù)傳遞

name傳遞

to來傳遞

采用url傳參

9. is的用法（用于動(dòng)態(tài)組件且基于 DOM 內(nèi)模板的限制來工作。）

is用來動(dòng)態(tài)切換組件，DOM模板解析

tabletris="my-row"/tr /table

10.vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？

是什么：vue框架中狀態(tài)管理:有五種，分別是 State、 Getter、Mutation 、Action、 Module

使用：新建一個(gè)目錄store，

場(chǎng)景：?jiǎn)雾搼?yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購(gòu)物車

vuex的State特性

A、Vuex就是一個(gè)倉庫，倉庫里面放了很多對(duì)象。其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)于一般Vue對(duì)象里面的data

B、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新

C、它通過mapState把全局的state和getters映射到當(dāng)前組件的computed計(jì)算屬性中

vuex的Getter特性

A、getters可以對(duì)State進(jìn)行計(jì)算操作，它就是Store的計(jì)算屬性

B、雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters可以在多組件之間復(fù)用

C、如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用getters

vuex的Mutation特性

改變store中state狀態(tài)的唯一方法就是提交mutation，就很類似事件。每個(gè)mutation都有一個(gè)字符串類型的事件類型和一個(gè)回調(diào)函數(shù)，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個(gè)回調(diào)函數(shù)，那么我們需要執(zhí)行一個(gè)相應(yīng)的調(diào)用方法：store.commit。

Action類似于mutation，不同在于：Action提交的是mutation，而不是直接變更狀態(tài)；Action可以包含任意異步操作，Action函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對(duì)象，因此你可以調(diào)用context.commit提交一個(gè)mutation，或者通過context.state和context.getters來獲取state和getters。Action通過store.dispatch方法觸發(fā)：eg。store.dispatch('increment')

vuex的module特性Module其實(shí)只是解決了當(dāng)state中很復(fù)雜臃腫的時(shí)候，module可以將store分割成模塊，每個(gè)模塊中擁有自己的state、mutation、action和getter

vue移動(dòng)端面試題的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vue基礎(chǔ)面試題、vue移動(dòng)端面試題的信息別忘了在本站進(jìn)行查找喔。