前端Vue面試題筆試題

前言

接上篇前端Js筆試題面試題，收集整理Vue相關的面試題，供本身如今和之後學習和麪試，也但願能對點進來的小夥伴有所幫助。

Vue基礎必備

一、v-show 與 v-if 區別

一、v-show是css切換，v-if是完整的銷燬和從新建立。

二、使用 頻繁切換時用v-show，運行時較少改變時用v-if

三、v-if=‘false’ v-if是條件渲染，當false的時候不會渲染

二、Class 與 Style 如何動態綁定？

Class

一、對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

二、數組方法 v-bind:class="[class1, class2]"<

三、行內 v-bind:style="{color: color, fontSize: fontSize+'px'}"

Stlye

一、對象方法 <v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

二、數組方法 v-bind:style="[styleColor,styleSize]"

三、計算屬性和 watch 的區別

computed： 是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；

watch： 更多的是「觀察」的做用，相似於某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行後續操做；

運用場景：

一、當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed，由於能夠利用 computed 的緩存特性，避免每次獲取值時，都要從新計算；

二、當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用watch，使用watch選項容許咱們執行異步操做 ( 訪問一個API)，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的。

四、事件修飾符

.native:綁定一個原生的click事件

.prevent: 提交時間再也不重載頁面

.stop:阻止單擊事件冒泡

.self:當事件發生在該元素自己而不是子元素的時候觸發

.capture:事件偵聽，事件發生的時候會調用

組合鍵 click.ctrl.exact 只有ctrl被按下的時候才觸發

五、組件中 data 爲何是函數

由於組件是用來複用的，JS 裏對象是引用關係，這樣做用域沒有隔離，而 new Vue 的實例，是不會被複用的，所以不存在引用對象的問題。

六、開發中經常使用的指令有哪些

v-model :通常用在表達輸入，很輕鬆的實現表單控件和數據的雙向綁定

v-html:更新元素的 innerHTML

v-show 與 v-if:條件渲染,

v-on : click:能夠簡寫爲@click,@綁定一個事件。若是事件觸發了，就能夠指定事件的處理函數

v-for:基於源數據屢次渲染元素或模板塊

v-bind:當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM

七、v-model 的原理

vue 項目中主要使用v-model指令在表單 input、textarea、select 等元素上建立雙向數據綁定，咱們知道 v-model 本質上不過是語法糖，v-model 在內部爲不一樣的輸入元素使用不一樣的屬性並拋出不一樣的事件：

一、text 和 textarea 元素使用 value 屬性和 input 事件；

二、checkbox 和 radio 使用 checked 屬性和 change 事件；

三、select 字段將 value 做爲 prop 並將 change 做爲事件;

八、vue插槽

單個插槽<

當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片斷將插入到插槽所在的 DOM 位置，並替換掉插槽標籤自己

命名插槽

solt元素能夠用一個特殊的特性name來進一步配置如何分發內容。多個插槽能夠有不一樣的名字。 這樣能夠將父組件模板中 slot 位置，和子組件 slot元素產生關聯，便於插槽內容對應傳遞

做用域插槽

能夠訪問組件內部數據的可複用插槽(reusable slot)在父級中，具備特殊特性 slot-scope 的<template> 元素必須存在，表示它是做用域插槽的模板。slot-scope 的值將被用做一個臨時變量名，此變量接收從子組件傳遞過來的 prop 對象

九、組件之間的傳值通訊

一、父組件給子組件傳值

使用props，父組件可使用props向子組件傳遞數據

二、子組件向父組件通訊

父組件向子組件傳遞事件方法，子組件經過$emit觸發事件，回調給父組件

三、非父子，兄弟組件之間通訊

能夠經過實例一個vue實例Bus做爲媒介，要相互通訊的兄弟組件之中，都引入Bus，而後經過分別調用Bus事件觸發(&dollar;emit)和監聽(&dollar;on)來實現通訊和參數傳遞

十、對keep-alive的瞭解

keep-alive是一個內置組件，可以使被包含的組件保留狀態或避免從新渲染，有include（包含的組件緩存）和exclude（排除的組件不緩存）兩個屬性。

對應兩個鉤子函數 activated 和 deactivated ，當組件被激活時，觸發鉤子函數 activated，當組件被移除時，觸發鉤子函數 deactivated。

十一、 Vue computed 實現

一、創建與其餘屬性（如：data、 Store）的聯繫；

二、屬性改變後，通知計算屬性從新計算

Vue生命週期

十二、請詳細說下你對vue生命週期的理解

生命週期共分爲8個階段建立前/後，載入前/後，更新前/後，銷燬前/後

建立先後 beforeCreate/created

在beforeCreate 階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象有了，el尚未。

載入先後 beforeMount/mounted

在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前未虛擬的DOM節點，data還沒有替換。在mounted階段，vue實例掛載完成，data成功渲染。

更新先後 beforeUpdate/updated

當data變化時，會觸發beforeUpdate和updated方法。這兩個不經常使用，不推薦使用。

銷燬先後beforeDestory/destoryed

beforeDestory是在vue實例銷燬前觸發，通常在這裏要經過removeEventListener解除手動綁定的事件。實例銷燬後，觸發的destroyed。

生命週期的做用？

生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程當中更容易造成好的邏輯。

1三、請列舉出3個Vue中經常使用的生命週期鉤子函數?

created: 實例已經建立完成以後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段尚未開始, $el屬性目前還不可見

mounted: el被新建立的 vm.&dollar;el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted被調用時 vm.$el 也在文檔內。

activated: keep-alive組件激活時調用

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

Vue 的父組件和子組件生命週期鉤子函數執行順序能夠歸類爲如下 4 部分：

加載渲染過程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子組件更新過程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父組件更新過程

父 beforeUpdate -> 父 updated

銷燬過程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

1五、在什麼階段才能訪問操做DOM？

在鉤子函數 mounted 被調用前，Vue 已經將編譯好的模板掛載到頁面上，因此在 mounted 中能夠訪問操做 DOM。

1六、在哪一個生命週期內調用異步請求？

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

一、能更快獲取到服務端數據，減小頁面loading 時間

二、ssr不支持 beforeMount 、mounted 鉤子函數，因此放在 created 中有助於一致性

Vue-Router路由

1七、vue-router 路由模式有幾種？

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

一、hash: 使用 URL hash 值來做路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器

二、history : 依賴 HTML5 History API 和服務器配置。具體能夠查看 HTML5 History 模式

三、abstract : 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式.

1八、路由的跳轉方式

通常有兩種

一、聲明式（標籤跳轉）

<router-link to='home'>router-link標籤會渲染<a>標籤，在template中的跳轉都是這種；

二、編程式（ js跳轉）

另外一種是編程是導航 也就是經過js跳轉 好比router.push('/home')

1九、路由原理

前端路由實現起來其實很簡單，本質就是監聽 URL 的變化，而後匹配路由規則，顯示相應的頁面，而且無須刷新。目前單頁面使用的路由就只有兩種實現方式

一、hash 模式

二、history 模式

www.test.com/##/ 就是 Hash URL，當 ## 後面的哈希值發生變化時，不會向服務器請求數據，能夠經過 hashchange 事件來監聽到 URL 的變化，從而進行跳轉頁面。

History模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀

20、Vue的路由實現：hash模式 和 history模式

一、hash模式: 在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用 window.location.hash讀取。特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。

二、history模式： history採用HTML5的新特性；且提供了兩個新方法： pushState(),replaceState()能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動

2一、vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next

to：route即將進入的目標路由對象。

from：route當前導航正要離開的路由。

next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉

2二、&dollar;route和$router的區別

&dollar;route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。
而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等

2三、vue-router怎麼定義動態路由？怎麼獲取傳過來的動態參數？

定義：path:'a/:value' 獲取：this.$route.params.value。

Vuex

2三、Vuex的工做流程，以及它的做用，使用場景。

vuex的工做流程：

一、在vue組件裏面，經過dispatch來觸發actions提交修改數據的操做。

二、而後再經過actions的commit來觸發mutations來修改數據。

三、mutations接收到commit的請求，就會自動經過Mutate來修改state（數據中內心面的數據狀態）裏面的數據。

四、最後由store觸發每個調用它的組件的更新

Vuex的做用：項目數據狀態的集中管理，複雜組件(如兄弟組件、遠房親戚組件)的數據通訊問題。

2四、vue 中 ajax 請求代碼應該寫在組件的methods中仍是vuex 的action中

若是請求來的數據不是要被其餘組件公用，僅僅在請求的組件內使用，就不須要放入 vuex 的 state 裏

若是被其餘地方複用，請將請求放入 action 裏，方便複用，幷包裝成 promise 返回

2五、vuex是什麼？怎麼使用？哪一種功能場景使用它？

一、只用來讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事件； 異步邏輯應該封裝在action中。

二、在main.js引入store，注入。新建了一個目錄store，… export

三、場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

Vue其餘相關

2六、怎麼快速定位哪一個組件出現性能問題

用 timeline 工具。 大意是經過 timeline 來查看每一個函數的調用時常，定位出哪一個函數的問題，從而能判斷哪一個組件出了問題

2七、MVVM

MVVM 由如下三個內容組成

View：界面

Model：數據模型

ViewModel：做爲橋樑負責溝通 View 和 Model

2八、路由懶加載

爲了提高頁面加載速度，實現按需加載，也就是當路由訪問時才加載對應組件，咱們能夠結合vue的異步組件和webpack的代碼分割功能來實現路由的懶加載。

{
    path: '/iov/login',
    name: '登陸',
    component: resolve => require(['@/views/login/login'], resolve),
},
{
    path:'/iov/organization',
    name:'組織管理',
    component:() => import('@/views/enterprise/organization')
}

2九、elementUI

表單彈窗中 elementform 清除驗證殘留提示

給表單添加不一樣的 ref （REFNAME），若是有相同的ref 會致使殘留驗證提示清除失敗

this.dialogTranspor = true
    //彈窗打開後 dom 沒有生成，全部要用 this.$nextTick
   
    this.$nextTick(function () {
     
        this.$refs.REFNAME.resetFields();

      })

頁碼數沒法正常顯示

場景：列表頁在跳到詳情或其餘頁面後再返回列表頁，沒法正常顯示對應頁數（頁碼數放在state中），但請求的數據時正常的;

解決方案：頁碼數、總頁數必需要在同一個對象中，不然當前頁碼數不能正常顯示

30、NextTick

nextTick可讓咱們在下次 DOM 更新循環結束以後執行延遲迴調，用於得到更新後的 DOM

// 修改數據
vm.msg = 'Hello'
// DOM 還未更新
Vue.nextTick(function () {
  // DOM 更新
})

3一、指令v-el的做用是什麼?

提供一個在頁面上已存在的 DOM元素做爲 Vue實例的掛載目標.能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例, ### 3二、在Vue中使用插件的步驟採用ES6的import ... from ...語法或CommonJS的require()方法引入插件使用全局方法Vue.use( plugin )使用插件,能夠傳入一個選項對象Vue.use(MyPlugin, { someOption: true })