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

本文目錄一覽：

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

三十七個常見Vue面試題

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

Vue不是一個MVVM框架，它是一個視圖層框架。

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

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

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

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

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

因為這些方法都會改變數(shù)組本身。

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

Vue初始化的時候，掛載之后會進行編譯。生成renderFunction。

當取值的時候，就會搜集watcher，放到dep里面。

當用戶更改值的時候，就會通知watcher，去更新視圖。

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

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

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

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

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

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

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

所以采用watcher + Diff算法來檢測差異。

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

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

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

正常的一個組件是一個類繼承了Vue。

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

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

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

首先，v-for和v-if 不能在同一個標簽中使用。

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

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

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

在普通元素上用v-model，會生成指令，還可能因為不同的元素：

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

源碼：

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

在模板編譯的時候，處理組件中的子節(jié)點和slot標簽

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

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

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

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

使用有兩個場景，一個是動態(tài)組件，一個是router-view

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

緩存的是組件的實例，用key和value對象保存。

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

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

如果需要緩存，就用組件的id和標簽名，生成一個key，把當前vnode的instance作為value，存成一個對象。這就是緩存列表

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

并且給組件添加一個keepAlive變量為true，當組件初始化的時候，不再初始化。

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

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

問題：無法持久化。

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

1.為什么會形成跨域？

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

解決方法：安裝插件

Pip install django-cors-headers

2.vuex的工作流程？

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

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

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

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

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

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

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

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

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

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

6.深拷貝與淺拷貝？

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

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表示不需要緩存的頁面。如果兩個同時設(shè)置，exclude優(yōu)先級更 改，則組件不會被緩存。

應(yīng)用場景： 用戶在某個列表頁面選擇篩選條件過濾出一份數(shù)據(jù)列表，由列表頁面進入數(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)聽一個事件

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

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

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

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

11.組件跨級傳值

$attrs a-b-c

$listeners 監(jiān)聽

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

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

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

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

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

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

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

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

v-if 是惰性的；v-show 做的僅是簡單的css切換。

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

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

v-html 反之。

18.v-for key的作用？

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

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

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

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

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

20.vue獲取dom？

ref

21.vue初始化頁面閃動問題？

webpack、vue-router

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

22.什么是vue-router？

vue router 是官方路由管理器。

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

23.vue路由傳參，接收？

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

接：this.$router.query.xxx

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

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

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

25.如何讓scss只在當前組件中起作用？

vue常見面試題（3）

1. 什么是vue的計算屬性computed

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

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

vue-cli 的腳手架項目模板有browserify 和 webpack；

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

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

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

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

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

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

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

name傳遞

to來傳遞

采用url傳參

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

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

tabletris="my-row"/tr /table

10.vuex是什么？怎么使用？哪種功能場景使用它？

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

使用：新建一個目錄store，

場景：單頁應(yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購物車

vuex的State特性

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

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

C、它通過mapState把全局的state和getters映射到當前組件的computed計算屬性中

vuex的Getter特性

A、getters可以對State進行計算操作，它就是Store的計算屬性

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

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

vuex的Mutation特性

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

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

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

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