面試題：Vue

時間 2019-12-02

標籤面試 vue 欄目快樂工作简体版

原文原文鏈接

持續更新中...css

面試傳送門:html

面試題：HTML+CSS

面試題：HTTP

面試重點：webpack

面試題：JS

面試問題：接招人事(非技術性問題)

001.vue中的MVVM模式

即Model-View-ViewModel。前端

Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化vue

ViewModel是Vue的核心，它是Vue的一個實例。Vue實例時做用域某個HTML元素上的，這個HTML元素能夠是body，也能夠是某個id所指代的元素。react

DOM Listeners和Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；Data Bindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。jquery

002.v-show與v-if的區別

條件渲染指令，與v-if不一樣的是，不管v-show的值爲true或false，元素都會存在於HTML代碼中；而只有當v-if的值爲true，元素纔會存在於HTML代碼中。v-show指令只是設置了元素CSS的style值webpack

003.指令keep-alive

在vue-router寫着keep-alive，keep-alive的含義：若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個keep-alive指令es6

004.路由嵌套

路由嵌套會將其餘組件渲染到該組件內，而不是進行整個頁面跳轉。
router-view自己就是將組件渲染到該位置，web

005.指令v-el的使用

有時候咱們想就像使用jquery那樣去訪問一個元素，此時就可使用v-el指令，去給這個元素註冊一個索引，方便經過所屬實例的$el訪問這個元素。面試

注： HTML不區分大小寫，因此v-el:someEl將轉換爲全小寫。能夠用v-el:some-el而後設置this.$el.someEl。

示例：

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>
複製代碼

006.vue中使用事件名

在vuejs中，咱們常常要綁定一些事件，有時候給DOM元素綁定，有時候給組件綁定。綁定事件在HTML中用v-on:click="event"，能夠簡寫爲：@click="event"

007.vue.js是什麼

Vue.js（是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。
Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。
另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件

008.route 和 router 的區別是什麼？

route是「路由信息對象」，包括path,params,hash,query,fullPath,matched,name等路由信息參數。

router是「路由實例對象」，包括了路由的跳轉方法(push、replace)，鉤子函數等。

009.mvvm和mvc區別?它和其它框架(jquery)的區別是什麼?哪些場景適合?

mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。

區別：vue數據驅動，經過數據來顯示視圖層而不是節點操做。

場景：數據操做比較多的場景，更加便捷

010.vue的優勢是什麼?

低耦合。視圖(View)能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

可重用性。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。

獨立開發。開發人員能夠專一於業務邏輯和數據的開發(ViewModel)，設計人員能夠專一於頁面設計。

可測試。界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫。

011.vuex面試相關

(1)vuex是什麼?

vue框架中狀態管理。

(2)vuex有哪幾種屬性?

有五種，分別是 State、 Getters、Mutations 、Actions、 Module

vuex的State特性

A、Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的data

B、state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新

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

vuex的Getters特性

A、getters 能夠對State進行計算操做，它就是Store的計算屬性

B、雖然在組件內也能夠作計算屬性，可是getters 能夠在多組件之間複用

C、若是一個狀態只在一個組件內使用，是能夠不用getters

vuex的Mutations特性

Actions 相似於 mutations，不一樣在於：Actions 提交的是 mutations，而不是直接變動狀態;Actions 能夠包含任意異步操做。

(3)不用Vuex會帶來什麼問題?

可維護性會降低，想修改數據要維護三個地方;

可讀性會降低，由於一個組件裏的數據，根本就看不出來是從哪來的;

增長耦合，大量的上傳派發，會讓耦合性大大增長，原本Vue用Component就是爲了減小耦合，如今這麼用，和組件化的初衷相背。

012.如何讓CSS只在當前組件中起做用

將當前組件的<style>修改成<style scoped>

013.響應式系統簡述:

任何一個 Vue Component 都有一個與之對應的 Watcher 實例
Vue 的 data 上的屬性會被添加 getter 和 setter 屬性
當 Vue Component render 函數被執行的時候, data 上會被觸碰(touch), 即被讀, getter 方法會被調用, 此時 Vue 會去記錄此 Vue component 所依賴的全部 data。(這一過程被稱爲依賴收集)
data 被改動時（主要是用戶操做）, 即被寫, setter 方法會被調用, 此時 Vue 會去通知全部依賴於此 data 的組件去調用他們的 render 函數進行更新

014.談談你對虛擬DOM的理解？

首先,咱們都知道在前端性能優化的一個祕訣就是儘量少地操做DOM,不只僅是DOM相對較慢,更由於頻繁變更DOM會形成瀏覽器的迴流或者重回,這些都是性能的殺手,所以咱們須要這一層抽象,在patch過程當中儘量地一次性將差別更新到DOM中,這樣保證了DOM不會出現性能不好的狀況.

其次,現代前端框架的一個基本要求就是無須手動操做DOM,一方面是由於手動操做DOM沒法保證程序性能,多人協做的項目中若是review不嚴格,可能會有開發者寫出性能較低的代碼,另外一方面更重要的是省略手動DOM操做能夠大大提升開發效率.

015.Vue 中 key 值的做用？

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key 的做用主要是爲了高效的更新虛擬DOM。

016.vue 中怎麼重置 data?

使用Object.assign()，vm.options.data能夠獲取到組件初始化狀態下的data。
Object.assign(this.$data, this.$options.data())

017.組件中寫 name 選項有什麼做用？

項目使用 keep-alive 時，可搭配組件 name 進行緩存過濾
DOM 作遞歸組件時須要調用自身 name
vue-devtools 調試工具裏顯示的組見名稱是由vue中組件name決定的

018.爲何須要 nextTick?

Vue 是異步修改 DOM 的而且不鼓勵開發者直接接觸 DOM，但有時候業務須要必須對數據更改--刷新後的 DOM 作相應的處理，這時候就可使用 Vue.nextTick(callback)這個 api 了。

019.vue 首屏加載優化方案

把不常改變的庫放到 index.html 中，經過 cdn 引入
vue 路由的懶加載
不生成 map 文件（找到 config/index.js，修改成 productionSourceMap: false）
vue 組件儘可能不要全局引入
使用更輕量級的工具庫
開啓gzip壓縮
首頁單獨作服務端渲染

020.Vue3.0 有沒有過了解？

關於Vue 3.0，大體說了三個點，第一個是關於提出的新API setup()函數，第二個說了對於Typescript的支持，最後說了關於替換Object.defineProperty爲 Proxy 的支持。

詳細說了下關於Proxy代替帶來的性能上的提高，由於傳統的原型鏈攔截的方法，沒法檢測對象及數組的一些更新操做，但使用Proxy又帶來了瀏覽器兼容問題。

021.說一下Vue的雙向綁定數據的原理

vue 實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty() 來劫持各個屬性的 setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調

022.NextTick 是作什麼的?

nextTick，則能夠在回調中獲取更新後的 DOM

023.Vue 組件 data 爲何必須是函數?

由於js自己的特性帶來的，若是 data 是一個對象，那麼因爲對象自己屬於引用類型，當咱們修改其中的一個屬性時，會影響到全部Vue實例的數據。若是將 data 做爲一個函數返回一個對象，那麼每個實例的 data 屬性都是獨立的，不會相互影響了

024.計算屬性computed 和事件 methods 有什麼區別

咱們能夠將同一函數定義爲一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的

不一樣點：

computed: 計算屬性是基於它們的依賴進行緩存的,只有在它的相關依賴發生改變時纔會從新求值
對於 method ，只要發生從新渲染，method 調用總會執行該函數

Vue中watch、computed與methods的聯繫和區別

025.vue 等單頁面應用的優缺點：

優勢：

良好的交互體驗
良好的先後端工做分離模式
減輕服務器壓力

缺點：

SEO難度較高
前進、後退管理
初次加載耗時多

026.vue生命週期

vue的生命週期主要分爲beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy,destroyed

建立先後、載入先後、更新先後、銷燬先後
Vue 生命週期與鉤子函數

027.Vue 導航守衛(路由的生命週期)

全局的

router.beforeEach
router.beforeResolve
router.afterEach

單個路由獨享的

beforeEnter

組件級的

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

Vue 導航守衛(路由的生命週期)

028.常見的跨域解決方案

前端配置vue.config.js
後端配置
jsonp（只能解決get）

步驟：
1).去建立一個script標籤
2).script的src屬性設置接口地址 3).接口參數，必需要帶一個自定義函數名，要否則後臺沒法返回數據 4).經過定義函數名去接受返回的數據

常見的跨域解決方案

029.什麼是webpack及其優勢

打包：能夠把多個JavaScript文件打包成一個文件，減小服務器壓力和下載寬帶
轉換：把擴展語言轉換成爲普通的JavaScript，讓瀏覽器順利運行。
優化：肩負起了優化和提高性能的責任

030.Vue中項目如何優化？

data優化
SPA首屏加載優化
組件優化
巧妙利用指令v-if(show)，使用v-for要綁定key
使用Object.freeze
路由懶加載
動態導入組件
圖片懶加載
第三方模塊按需導入
骨架屏
PWA緩存
預渲染
服務端渲染SSR
緩存和壓縮
HTTP優化

031.Vue遞歸組件的使用

遞歸組件

032.Vue的mode中hash與history的區別

hash模式從新加載的時候只加載#後面的
history模式則是整個地址從新加載，不過他能夠保存歷史記錄，方便前進後退

vue-router 有 3 種路由模式：hash、history、abstract

hash: 使用 URL hash 值來做路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；
history : 依賴 HTML5 History API 和服務器配置。具體能夠查看 HTML5 History 模式；
abstract : 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式.

Vue的mode中 hash 與 history 的區別

033.vue中經常使用的命令

v-if v-show區別
v-for
v-model
v-bind
v-on

Vue 指令總結

034.Vue 的父組件和子組件生命週期鉤子函數執行順序？

Vue 的父組件和子組件生命週期鉤子函數執行順序？

加載渲染過程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子組件更新過程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父組件更新過程
父 beforeUpdate -> 父 updated
銷燬過程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

035.在哪一個生命週期內調用異步請求？

能夠在鉤子函數 created、beforeMount、mounted 中進行調用，由於在這三個鉤子函數中，data 已經建立，能夠將服務端端返回的數據進行賦值。可是本人推薦在 created 鉤子函數中調用異步請求，由於在 created 鉤子函數中調用異步請求有如下優勢：

能更快獲取到服務端數據，減小頁面 loading 時間；
ssr 不支持 beforeMount 、mounted 鉤子函數，因此放在 created 中有助於一致性；

036.組件中 data 爲何是一個函數？

由於組件是用來複用的，且 JS 裏對象是引用關係，若是組件中 data 是一個對象，那麼這樣做用域沒有隔離，子組件中的 data 屬性值會相互影響。

若是組件中 data 選項是一個函數，那麼每一個實例能夠維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例，是不會被複用的，所以不存在引用對象的問題。

037.Vue組件間通訊有哪幾種方式？

props
$emit
$attr
$listener
provide inject (隔代通訊)
children
vuex

Vue組件之間的數據傳遞(通訊、交互)詳解

038.Proxy 與 Object.defineProperty 優劣對比

Proxy 的優點以下:

Proxy 能夠直接監聽對象而非屬性；
Proxy 能夠直接監聽數組的變化；
Proxy 有多達 13 種攔截方法,不限於 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具有的；
Proxy 返回的是一個新對象,咱們能夠只操做新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改；
Proxy 做爲新標準將受到瀏覽器廠商重點持續的性能優化，也就是傳說中的新標準的性能紅利；
Object.defineProperty 的優點以下:
兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,並且沒法用 polyfill 磨平，所以 Vue 的做者才聲明須要等到下個大版本( 3.0 )才能用 Proxy 重寫。

039.虛擬 DOM 的優缺點？

優勢：

保證性能下限：框架的虛擬 DOM 須要適配任何上層 API 可能產生的操做，它的一些 DOM 操做的實現必須是普適的，因此它的性能並非最優的；可是比起粗暴的 DOM 操做性能要好不少，所以框架的虛擬 DOM 至少能夠保證在你不須要手動優化的狀況下，依然能夠提供還不錯的性能，即保證性能的下限；
無需手動操做 DOM：咱們再也不須要手動去操做 DOM，只須要寫好 View-Model 的代碼邏輯，框架會根據虛擬 DOM 和數據雙向綁定，幫咱們以可預期的方式更新視圖，極大提升咱們的開發效率；
跨平臺：虛擬 DOM 本質上是 JavaScript 對象,而 DOM 與平臺強相關，相比之下虛擬 DOM 能夠進行更方便地跨平臺操做，例如服務器渲染、weex 開發等等。

缺點：

沒法進行極致優化：雖然虛擬 DOM + 合理的優化，足以應對絕大部分應用的性能需求，但在一些性能要求極高的應用中虛擬 DOM 沒法進行鍼對性的極致優化。

040.虛擬 DOM 實現原理？

虛擬 DOM 的實現原理主要包括如下 3 部分：

用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；
diff 算法 — 比較兩棵虛擬 DOM 樹的差別；
pach 算法 — 將兩個虛擬 DOM 對象的差別應用到真正的 DOM 樹。

041.vue插槽的使用？

默認插槽
具名插槽
做用域插槽

Vue 插槽(slot)使用(通俗易懂)

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

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

043.怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？

在router目錄下的index.js文件中，對path屬性加上/:id。使用route對象的params.id。

Vue 路由傳值(傳參)詳解

044.vue-loader是什麼？使用它的用途有哪些？

vue文件的一個加載器。
用途：js能夠寫es六、style樣式能夠scss或less、template能夠加jade等根據官網的定義，
vue-loader 是 webpack 的一個 loader，用於處理 .vue 文件.

045.爲何避免 v-if 和 v-for 用在一塊兒？

當Vue 處理指令時，v-for 比 v-if 具備更高的優先級，這意味着v-if將分別重複運行於每一個v-for循環中。經過v-if 移動到容器元素，不會再重複遍歷列表中的每一個值。取而代之的是，咱們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。

046.vue中Class 與 Style 如何動態綁定？

Vue Class與Style綁定

047.怎樣理解 Vue 的單向數據流？

全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而致使你的應用的數據流向難以理解。

額外的，每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新的值。這意味着你不該該在一個子組件內部改變 prop。若是你這樣作了，Vue 會在瀏覽器的控制檯中發出警告。子組件想修改時，只能經過 $emit 派發一個自定義事件，父組件接收到後，由父組件修改。

048.直接給一個數組項賦值，Vue 能檢測到變化嗎？

因爲 JavaScript 的限制，Vue 不能檢測到如下數組的變更：

當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength

049.vue.js的核心是什麼？

數據驅動（響應式）：data中的數據變了，視圖纔會變
組件化：拆組裝，目的在於重用，方便，髒活累活一次幹完，以後就輕鬆了

050.vue的經常使用修飾符？

事件修飾符：
.stop stopPropagation 阻止冒泡
.prevent preventDefault 阻止默認行爲
.self 事件做用在本身身上才觸發
.once 事件只觸發一次
鍵盤修飾符
.enter 回車鍵
.esc 退出鍵
v-model 指令修飾符
.lazy 由監聽oninput事件轉爲onchange事件
.number 儘可能將文本框中的值轉爲數字，能轉就轉，不能轉就不轉
.trim 去掉字符串的首尾空格