本篇文章給大家談?wù)剉ue項(xiàng)目面試中怎樣去說(shuō)，以及vue常見(jiàn)面試對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、三十七個(gè)常見(jiàn)Vue面試題
• 2、Vue面試題集錦
• 3、投簡(jiǎn)歷是人家問(wèn)vue是否熟練怎么回
• 4、史上最全前端vue面試題！推薦收藏

三十七個(gè)常見(jiàn)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ì)象類(lèi)型的值變化的時(shí)候，通過(guò)defineReactive方法，借助了defineProperty，將所有的屬性添加了getter和setter。用戶(hù)在取值和設(shè)置的時(shí)候，可以進(jìn)行一些操作。

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

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

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

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

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

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

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

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

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

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

Vue的mixin的作用就是抽離公共的業(yè)務(wù)邏輯，原理類(lèi)似對(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ù)來(lái)源不清晰

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

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

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

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

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

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

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

正常的一個(gè)組件是一個(gè)類(lèi)繼承了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()方法方法來(lái)替換_v()的內(nèi)容。

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

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

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

使用有兩個(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是專(zhuān)門(mén)為vue提供的全局狀態(tài)管理系統(tǒng)，用于多個(gè)組件中的數(shù)據(jù)共享、數(shù)據(jù)緩存。

問(wèn)題：無(wú)法持久化。

Vue面試題集錦

原理：在創(chuàng)建Vue實(shí)例時(shí)，Vue會(huì)遍歷data選項(xiàng)的屬性，利用Object.defineProperty()為屬性添加getter和setter對(duì)數(shù)據(jù)的讀取進(jìn)行劫持（getter用來(lái)依賴(lài)手機(jī)，setter用來(lái)派發(fā)更新），并且在內(nèi)部追蹤依賴(lài)，在屬性被訪問(wèn)和修改時(shí)通知變化。每個(gè)組件實(shí)例會(huì)有相應(yīng)的watcher實(shí)例，會(huì)在組件渲染過(guò)程中記錄依賴(lài)的所有數(shù)據(jù)屬性，之后依賴(lài)項(xiàng)被改動(dòng)時(shí)，setter方法會(huì)通知依賴(lài)與此data的watcher實(shí)例重新計(jì)算（派發(fā)更新），從而使它關(guān)聯(lián)的組件重新渲染。

一句話(huà)總結(jié)：vue.js采用數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱模式，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter、getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)響應(yīng)的監(jiān)聽(tīng)回調(diào)。

我的理解：在new Vue的時(shí)候，在Observer中通過(guò)Object.defineProperty()達(dá)到數(shù)據(jù)劫持，代理所有數(shù)據(jù)的getter和setter屬性，在每次觸發(fā)setter的時(shí)候，都會(huì)通過(guò)Dep來(lái)通知Watcher，Watcher作為Observer數(shù)據(jù)監(jiān)聽(tīng)器與Compile模板解析器之間的橋梁，當(dāng)Observer監(jiān)聽(tīng)到數(shù)據(jù)發(fā)生改變的時(shí)候，通過(guò)Updater來(lái)通知Compile更新視圖。而Compile通過(guò)Watcher訂閱對(duì)應(yīng)數(shù)據(jù)，綁定更新函數(shù)，通過(guò)Dep來(lái)添加訂閱者，達(dá)到雙向綁定。

Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的全過(guò)程，就是生命周期。也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM-渲染、更新-渲染、卸載等一系列過(guò)程。

它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯。

它可以分為8個(gè)階段：創(chuàng)建前/后、載入前/后、更新前/后、銷(xiāo)毀前/后。

第一次頁(yè)面加載時(shí)會(huì)觸發(fā)beforeCreate、created、beforeMounted、mounted

DOM渲染在mounted中就已經(jīng)完成。

1、beforeCreate：可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)；

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

3、mounted：掛載元素，獲取DOM節(jié)點(diǎn)；

4、updated：如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)；

5、beforeDestroy：可以放一個(gè)確認(rèn)停止事件的確認(rèn)框；

6、nextTick：更新數(shù)據(jù)后立即操作DOM。

1、對(duì)象方法v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

2、數(shù)組方法v-bind:class="[class1, class2]"

3、行內(nèi)v-bind:style="{color: color, fontSize: fontSize+'px'}"

1、router-link標(biāo)簽會(huì)渲染為標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種；

2、另一種是編輯式導(dǎo)航，也就是通過(guò)js跳轉(zhuǎn)比如router.push('/home')

M- model ，model 表示數(shù)據(jù)模型，也可以在model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯

V- view，view表示視圖，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)換為視圖展示出來(lái)

VM- viewmodel，viewmodel是一個(gè)同步view和model的對(duì)象，連接view和model，用于監(jiān)聽(tīng)數(shù)據(jù)模型的改變和控制視圖行為

computed：computed是計(jì)算屬性，也就是計(jì)算值，更多用于計(jì)算值的場(chǎng)景。它具有緩存性，computed的值在getter執(zhí)行后是會(huì)緩存的，只有在它依賴(lài)的屬性值改變之后，下一次獲取computed的值時(shí)重新調(diào)用對(duì)應(yīng)的getter來(lái)計(jì)算。

watch：watch更多的是觀察作用，類(lèi)似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào)，用于觀察props、$emit或者本組件的值，當(dāng)數(shù)據(jù)變化時(shí)用來(lái)執(zhí)行回調(diào)進(jìn)行后續(xù)操作。它不具有緩存性，頁(yè)面重新渲染時(shí)值不會(huì)變化也不會(huì)執(zhí)行。

在style標(biāo)簽上添加scoped屬性，以表示它的樣式作用于當(dāng)下的模塊，很好的實(shí)現(xiàn)了樣式私有化的目的，但是也得慎用，樣式不易改變。

解決方法：

① 使用混合型的css樣式，混合使用全局樣式和私有樣式。

② 深度作用選擇器：如果你希望scoped樣式中的一個(gè)選擇器能夠作用的更深，可以使用操作符。如：style scoped.a.b{/ ... /}/style

一個(gè)元素綁定多個(gè)事件的寫(xiě)法有兩種：

1、修飾符的使用

2、在method方法里分別寫(xiě)兩個(gè)事件

Vue組件中的data值不能為對(duì)象，因?yàn)閷?duì)象是引用類(lèi)型，組件可能會(huì)被多個(gè)實(shí)例同時(shí)引用，如果data值為對(duì)象，將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對(duì)象，其中一個(gè)組件改變data屬性值，其它實(shí)例也會(huì)受到影響。

原理：JS執(zhí)行是單線(xiàn)程的，它是基于事件循環(huán)的。所有同步任務(wù)都在主線(xiàn)程上執(zhí)行，形成一個(gè)執(zhí)行棧。主線(xiàn)程之外，還存在一個(gè)任務(wù)隊(duì)列，只要異步任務(wù)有了運(yùn)行結(jié)果，就在任務(wù)隊(duì)列中放置一個(gè)事件。一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取任務(wù)隊(duì)列，看看那些對(duì)應(yīng)的異步任務(wù)，等結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開(kāi)始執(zhí)行。主線(xiàn)程不斷重復(fù)上面的步驟。主執(zhí)行的執(zhí)行過(guò)程就是tick，所有的異步結(jié)果都是通過(guò)任務(wù)隊(duì)列來(lái)調(diào)度的。任務(wù)分為兩大類(lèi)：宏任務(wù)和微任務(wù)，宏任務(wù)包括：setTimeOut等，微任務(wù)包括promise.then。

Vue用異步隊(duì)列的方式來(lái)控制DOM更新和nextTick回調(diào)先后執(zhí)行。在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，nextTick主要使用了宏任務(wù)和微任務(wù)，nextTick把要執(zhí)行的任務(wù)推入一個(gè)隊(duì)列中，在下一個(gè)tick同步執(zhí)行隊(duì)列的所有任務(wù)，它是異步任務(wù)中的微任務(wù)。如果我們?cè)诟铝艘粋€(gè)響應(yīng)式數(shù)據(jù)后，需要同步拿到這個(gè)渲染后的DOM結(jié)果，就使用nextTick方法，異步拿這個(gè)結(jié)果。

使用方式：

① this. nextTick.then(cb); 異步

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

父組件： this.$refs.yeluosen.childMethod()

子組件向父組件傳值并調(diào)用方法： $emit

組件之間： bus==$emit+$on

1、第一種方法是直接在子組件中通過(guò)this. emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這個(gè)事件就行了。

3、第三種都可以實(shí)現(xiàn)子組件調(diào)用父組件的方法。

keep-alive是Vue內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

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

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

全局的：前置守衛(wèi)、后置鉤子（beforeEach、afterEach）beforeResolve

單個(gè)路由獨(dú)享的：beforeEnter

組件級(jí)的：beforeRouteEnter（不能獲取組件實(shí)例this）、beforeRouteUpdate、beforeRouteLeave

這是因?yàn)樵趫?zhí)行路有鉤子函數(shù)beforeRouteEnter的時(shí)候，組件還沒(méi)有被創(chuàng)建出來(lái)，先執(zhí)行beforeRouteEnter，再執(zhí)行周期鉤子函數(shù)beforeCreate，可以通過(guò)next獲取組件的實(shí)例對(duì)象，如：next((vm) = {})，參數(shù)vm就是組件的實(shí)例化對(duì)象。

缺點(diǎn)：

優(yōu)點(diǎn)：

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

vue-cli提供的腳手架模板有browserify和webpack。

① 是什么？

Vue框架中的狀態(tài)管理，分別是State、Getter、Mutation、Action、Module。

② 怎么使用？

新建一個(gè)目錄store。

③ 功能場(chǎng)景？

單頁(yè)應(yīng)用中，組件之間的狀態(tài)。音樂(lè)播放、登錄狀態(tài)、加入購(gòu)物車(chē)等。

④ vuex的狀態(tài)：

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

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

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

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

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

① 創(chuàng)建組件頁(yè)面eg Toast.vue

② 用Vue.extend() 擴(kuò)展一個(gè)組件構(gòu)造器，再通過(guò)實(shí)例化組件構(gòu)造器，就可以創(chuàng)造出可復(fù)用的組件。

③ 將toast組件掛載到新創(chuàng)建的div上；

④ 將toast組件的dom添加到body里；

⑤ 修改優(yōu)化達(dá)到動(dòng)態(tài)控制頁(yè)面顯示文字跟顯示時(shí)間；

修飾符分為：一般修飾符、事件修飾符、按鍵、系統(tǒng)

① 一般修飾符：

② 事件修飾符

③ 按鍵修飾符

④ 系統(tǒng)修飾符（可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤(pán)事件的監(jiān)聽(tīng)器。）

Vue的核心的功能，是一個(gè)視圖模板引擎，但這不是說(shuō)Vue就不能成為一個(gè)框架。在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，我們可以通過(guò)添加組件系統(tǒng)、客戶(hù)端路由、大規(guī)模狀態(tài)管理來(lái)構(gòu)建一個(gè)完整的框架。更重要的是，這些功能相互獨(dú)立，你可以在核心功能的基礎(chǔ)上任意選用其他的部件，不一定要全部整合在一起?？梢钥吹剑f(shuō)的“漸進(jìn)式”，其實(shí)就是Vue的使用方式，同時(shí)也體現(xiàn)了Vue的設(shè)計(jì)的理念

在我看來(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ī)制- 必須使用它的依賴(lài)注入- 必須使用它的特殊形式定義組件（這一點(diǎn)每個(gè)視圖框架都有，難以避免）所以Angular是帶有比較強(qiáng)的排它性的，如果你的應(yīng)用不是從頭開(kāi)始，而是要不斷考慮是否跟其他東西集成，這些主張會(huì)帶來(lái)一些困擾。

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ù)式，都可以，它只是個(gè)輕量視圖而已，只做了自己該做的事，沒(méi)有做不該做的事，僅此而已。

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

投簡(jiǎn)歷是人家問(wèn)vue是否熟練怎么回

根據(jù)自己的真實(shí)水平回答，不要不懂裝懂，容易留下不好的印象。

根據(jù)自己的實(shí)際水平,簡(jiǎn)要介紹計(jì)算機(jī)等級(jí)證書(shū),和專(zhuān)業(yè)證書(shū)。如果真的熟練就回答是。然后簡(jiǎn)單的交流一下一些相關(guān)內(nèi)容。如果不熟練，就如實(shí)告知，以免不懂裝懂，留下不好印象落選。

史上最全前端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組件里面，通過(guò)dispatch來(lái)出發(fā)actions提交修改數(shù)據(jù)的操作。

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

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

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

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

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

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

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

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

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

6.深拷貝與淺拷貝？

假設(shè)B復(fù)制A，修改A的時(shí)候，看B是否變化：B變了是淺拷貝（修改堆內(nèi)存中的同一個(gè)值），沒(méi)變是深拷貝（修改堆內(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表示需要緩存的頁(yè)面；exclude表示不需要緩存的頁(yè)面。如果兩個(gè)同時(shí)設(shè)置，exclude優(yōu)先級(jí)更 改，則組件不會(huì)被緩存。

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

9.vue傳值方式？

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

10. $on 兄弟組件傳值

$emit 分發(fā)

$on 監(jiān)聽(tīng)

$off 取消監(jiān)聽(tīng)

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

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

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

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

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

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

$attrs a-b-c

$listeners 監(jiān)聽(tīng)

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ù)的話(huà)，每個(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)建與銷(xiāo)毀， v-show 則僅在初始化時(shí)加載一次，v-if 開(kāi)銷(xiāo)相對(duì)來(lái)說(shuō)比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更新渲染過(guò)的數(shù)據(jù)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序改變，vue將不是移動(dòng)DOM元素來(lái)匹配數(shù)據(jù)項(xiàng)的改變，而是簡(jiǎn)單地復(fù)用此處每個(gè)元素，并確保在特定索引下顯示已被渲染過(guò)的每個(gè)元素。key屬性類(lèi)型只能是string或number。

key的特殊屬性主要用在虛擬DOM算法，在新舊node對(duì)比時(shí)辨識(shí)VNods。如不使用key，vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類(lèi)型元素的算法，它會(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初始化頁(yè)面閃動(dòng)問(wèn)題？

webpack、vue-router

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

22.什么是vue-router？

vue router 是官方路由管理器。

主要功能：路由嵌套，模塊化 基于組件路由配置，路由參數(shù)、查詢(xún)、通配符，細(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項(xiàng)目面試中怎樣去說(shuō)的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vue常見(jiàn)面試、vue項(xiàng)目面試中怎樣去說(shuō)的信息別忘了在本站進(jìn)行查找喔。