Vue.js 面試題整理

時間 2019-11-21

標籤 vue.js vue 面試整理欄目 JavaScript 简体版

原文原文鏈接

Vue項目結構介紹

build 文件夾：用於存放 webpack 相關配置和腳本。
config 文件夾：主要存放配置文件，好比配置開發環境的端口號、開啓熱加載或開啓gzip壓縮等。
dist 文件夾：默認命令打包生成的靜態資源文件。
node_modules：存放 npm 命令下載的開發環境和生產環境的依賴包。
src: 存放項目源碼及須要引用的資源文件。
src下assets：存放項目中須要用到的資源文件，css、js、images 等。
src下componets：存放 vue 開發中一些公共組件。
src下emit：本身配置的 vue 集中式事件管理機制。
src下router：vue-router vue 路由的配置文件。
src下service：本身配置的 vue 請求後臺接口方法。
src下page：存在 vue頁面組件的文件夾。
src下util：存放 vue開發過程當中一些公共的 js 方法。
src下vuex：存放 vuex 爲vue專門開發的狀態管理器。
src下app.vue：整個工程的 vue 根組件。
src下main.js：工程的入口文件。
index.html：設置項目的一些meta頭信息和提供html元素節點，用於掛載 vue。
package.json：對項目的描述以及對項目部署和啓動、打包的 npm 命令管理。

Vue 經常使用指令

v-model 多用於表單元素實現雙向數據綁定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 數組json" 循環數組或json(同angular中的ng-repeat),須要注意從vue2開始取消了$index
v-show 顯示內容（同angular中的ng-show）
v-hide 隱藏內容（同angular中的ng-hide）
v-if 顯示與隱藏（dom元素的刪除添加同angular中的ng-if 默認值爲false）
v-else-if 必須和v-if連用
v-else 必須和v-if連用不能單獨使用不然報錯模板編譯錯誤
v-bind 動態綁定做用：及時對頁面的數據進行更改
v-on:click 給標籤綁定函數，能夠縮寫爲@，例如綁定一個點擊函數函數必須寫在methods裏面
v-text 解析文本
v-html 解析html標籤
v-bind:class 三種綁定方法一、對象型 '{red:isred}' 二、三元型 'isred?"red":"blue"' 三、數組型 '[{red:"isred"},{blue:"isblue"}]'
v-once 進入頁面時只渲染一次不在進行渲染
v-cloak 防止閃爍
v-pre 把標籤內部的元素原位輸出

v-for 與 v-if 的優先級

當它們處於同一節點，v-for 的優先級比 v-if 更高。css

vue中 keep-alive 組件的做用

keep-alive：主要用於保留組件狀態或避免從新渲染。兩個重要屬性，include 緩存組件名稱，exclude 不須要緩存的組件名稱。html

v-if 和 v-show 有什麼區別

共同點：

v-if 和 v-show 均可以用來動態顯示DOM元素。前端

區別：

編譯過程： v-if 是真正的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
編譯條件： v-if 是惰性的，若是在初始渲染時條件爲假，則什麼也不作。直到條件第一次變爲真時，纔會開始渲染條件塊。v-show 無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。
性能消耗： v-if有更高的切換消耗。v-show 有更高的初始渲染消耗。
應用場景： v-if適合運行時條件不多改變時使用。v-show 適合頻繁切換。

v-on 能夠監聽多個方法嗎？

v-on 能夠監聽多個方法，可是同一種事件類型的方法，v-on 只能監聽一個。vue

vue 中 key 值的做用

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

vue $nextTick 做用是什麼？

官方解釋：在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。簡單的說就是再DOM操做時，vue的更新是異步的，$nextTick 是用來知道何時 DOM 更新完成的。舉例：咱們給一個div設置顯示隱藏，當點擊 button 的時候 #textDiv 先是被渲染出來，接着咱們獲取 #textDiv 的 html內容node

<div id="app">
    <div id="textDiv" v-if="isShow">這是一段文本</div>
    <button @click="getText">獲取div內容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        isShow: false
    },
    methods:{
        getText:function(){
            this.isShow= true;
            var text = document.getElementById('textDiv').innnerHTML;
             console.log(text);
        }
    }
})
</script>
複製代碼

這段代碼表面上看不會有問題，但實際上點擊報錯，提示獲取不到div元素，這裏就涉及到 Vue 異步更新隊列。python

Vue異步更新隊列

Vue 執行 DOM 更新時，只要觀察到數據變化，就會自動開啓一個隊列，並緩衝在同一個事件循環中發生的因此數據改變。在緩衝時會去除重複數據，從而避免沒必要要的計算和 DOM 操做。以上面的代碼舉例，你用一個 for 循環來動態改變 isShow 100 次，其實它只會應用最後一次改變，若是沒有這種機制，DOM 就要重繪 100 次，這當然是一個很大的開銷。因此執行 this.isShow= true時，#textDiv 尚未被建立出來，直到下一個 Vue 事件循環時，纔開始建立。上面的代碼應修改成：webpack

getText:function(){
    this.showDiv = true;
    this.$nextTick(function(){
            var text = document.getElementById('div').innnerHTML;
            console.log(text);  
    });
}
複製代碼

Vue 如何註冊組件

組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓咱們可使用獨立可複用的小組件來構建大型應用，任意類型的應用界面均可以抽象爲一個組件樹ios

全局註冊

在 src 文件夾中新建 utils 文件夾，在 utils 文件夾中新建 components.js 文件
在 components.js 文件引入全部要註冊的全局組件
在 main.js 中引入 components.js 文件並使用 Vue.use() 全局註冊舉例：

組件 diyHeader.vuec++

<template>
    <div>
        <div  id="header" @click="fun"></div>
    </div>
</template>

<script>
export default {
    methods:{
        fun(){
            alert(1);
        }
    }
}
</script>

<style>
#header{
    height: 100px;
    background: red;
}
</style>

複製代碼

util下components.js

import DiyHeader from "../components/diyHeader.vue"
export default (Vue)=>{
    Vue.component("DiyHeader", DiyHeader)
  }
複製代碼

main.js

import components from "./util/components"
Vue.use(components);
複製代碼

以後就能夠直接在項目中使用 DiyHeader 這個組件

局部註冊

在頁面裏導入組件而後放到components中就可使用了

import DiyHeader from "../components/diyHeader.vue"
export default {
  name: "App",
  components: { DiyHeader },
}
複製代碼

全局註冊指令

在 src 文件夾中新建 utils 文件夾，在 utils 文件夾中新建 directives.js 文件
在directives.js文件引入全部要註冊的全局指令
在 main.js 中引入 directives.js 文件並使用 Vue.use() 全局註冊

directives.js

export default (Vue)=>{
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus();
        }
    })
}
複製代碼

main.js

import directives from '@/utils/directives.js'
Vue.use(directives
複製代碼

什麼是vue生命週期和生命週期鉤子函數？

vue 的生命週期是： vue 實例從建立到銷燬，也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程。

vue生命週期鉤子函數有哪些？

beforeCreate：

在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。

created：

在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

beforeMount：

在掛載開始以前被調用：相關的 render 函數首次被調用。

mounted：

el 被新建立的 vm.el 也在文檔內。

beforeUpdate：

數據更新時調用，發生在虛擬 DOM 打補丁以前。這裏適合在更新以前訪問現有的 DOM，好比手動移除已添加的事件監聽器。該鉤子在服務器端渲染期間不被調用，由於只有初次渲染會在服務端進行。

updated：

因爲數據更改致使的虛擬 DOM 從新渲染和打補丁，在這以後會調用該鉤子。

activated

keep-alive 組件激活時調用。該鉤子在服務器端渲染期間不被調用。

deactivated

keep-alive 組件停用時調用。該鉤子在服務器端渲染期間不被調用。

beforeDestroy

實例銷燬以前調用。在這一步，實例仍然徹底可用。該鉤子在服務器端渲染期間不被調用。

destroyed

Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

errorCaptured（2.5.0+ 新增）

當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數：錯誤對象、發生錯誤的組件實例以及一個包含錯誤來源信息的字符串。此鉤子能夠返回 false 以阻止該錯誤繼續向上傳播。

vue等單頁面應用及其優缺點

單頁Web應用:

就是隻有一張Web頁面的應用。單頁應用程序 (SPA) 是加載單個 HTML 頁面並在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。瀏覽器一開始會加載必需的 HTML、CSS 和 JavaScript，全部的操做都在這張頁面上完成，都由 JavaScript 來控制。所以，對單頁應用來講模塊化的開發和設計顯得至關重要。

單頁 Web 應用的優勢：

提供了更加吸引人的用戶體驗：具備桌面應用的即時性、網站的可移植性和可訪問性。
單頁應用的內容的改變不須要從新加載整個頁面，web應用更具響應性和更使人着迷。
單頁應用沒有頁面之間的切換，就不會出現「白屏現象」,也不會出現假死並有「閃爍」現象
單頁應用相對服務器壓力小，服務器只用出數據就能夠，不用管展現邏輯和頁面合成，吞吐能力會提升幾倍。
良好的先後端分離。後端再也不負責模板渲染、輸出頁面工做，後端API通用化，即同一套後端程序代碼，不用修改就能夠用於Web界面、手機、平板等多種客戶端。

單頁 Web 應用的缺點：

首次加載耗時比較多。
SEO問題，不利於百度，360等搜索引擎收錄。
容易形成Css命名衝突。
前進、後退、地址欄、書籤等，都須要程序進行管理，頁面的複雜度很高，須要必定的技能水平和開發成本高。

自定義指令的幾個鉤子函數

bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新。
componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。
unbind：只調用一次，指令與元素解綁時調用。

13. Vue雙向綁定實現的原理

採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

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

vue-router 模塊的router-link組件

vue-router有哪幾種導航鉤子

全局守衛： router.beforeEach
全局解析守衛： router.beforeResolve
全局後置鉤子： router.afterEach
路由獨享的守衛： beforeEnter
組件內的守衛： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

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

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理器，採用集中式存儲管理應用的全部組件的狀態，主要是爲了多頁面、多組件之間的通訊。 Vuex有5個重要的屬性，分別是 State、Getter、Mutation、Action、Module，由 view 層發起一個 Action 給 Mutation，在 Mutation 中修改狀態，返回新的狀態，經過 Getter暴露給 view層的組件或者頁面，頁面監測到狀態改變因而更新頁面。若是你的項目很簡單，最好不要使用 Vuex，對於大型項目，Vuex 可以更好的幫助咱們管理組件外部的狀態，通常能夠運用在購物車、登陸狀態、播放等場景中。

$route和$router的區別

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

什麼是MVVM？

答：MVVM是是Model-View-ViewModel的縮寫，Model表明數據模型，定義數據操做的業務邏輯，View表明視圖層，負責將數據模型渲染到頁面上，ViewModel經過雙向綁定把View和Model進行同步交互，不須要手動操做DOM的一種設計思想。

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

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

vue項目優化解決方案

使用mini-css-extract-plugin插件抽離css
配置 optimization 把公共的js代碼抽離出來
經過 Webpack 處理文件壓縮
不打包框架、庫文件，經過cdn的方式引入
小圖片使用 base64
配置項目文件懶加載
UI 庫配置按需加載
開啓 Gzip壓縮

Vue路由的實現

hash模式

經過用window.location.hash監聽頁面的hash值變化，切換對於的內容，hash變化不會重載頁面。

history模式

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

Vue 父子組件通訊

父組件向子組件傳值經過props
子組件向父組件傳遞，子組件使用$emit傳遞，父組件使用on監聽。

Vue minix（混入）的用法

minix（混入）是 Vue 中的高級用法，混入 (mixin) 提供了一種很是靈活的方式，來分發 Vue 組件中的可複用功能。好比咱們作一個下拉加載，不少組件都須要用到下拉加載，咱們就能夠把下拉加載封裝成一個minix，而後須要下拉加載功能的頁面都去導入這個minix，minix裏面的屬性或者方法就會被混合到當前組件自己的屬性上。簡單的說，minix B 有個 C方法（下拉加載），頁面 A 須要下拉加載因而就導入了 minix B，這時候頁面 A 也就擁有了 C 方法。若是頁面 A 自己有個 D方法，這時頁面 A 就會既有 C 方法也有自己的 D 方法。

關於 Vue.use() 的理解

Vue.use() 是Vue的一個全局註冊方法，主要用來註冊插件，默認第一個參數是它接受的參數類型必須是Function或者是Object，若是是個對象，必須提供install方法，install方法默認第一個參數爲 Vue,其後的參數爲註冊時傳入的arguments。若是是 Function 那麼這個函數就被當作 install 方法。同一個插件 Vue.use 會自動阻止屢次註冊。除了在註冊插件中使用 Vue.use 外，咱們還能夠在 directive註冊、filters註冊、components註冊等條件下使用。有的時候咱們會遇到某些時候引入插件是並無使用 Vue.use ，好比使用 axios 的時候，緣由是 axios 沒有 install 方法，因此也就不須要使用 Vue.use 來全局註冊。

歡迎你們關注個人我的公衆號，互聯網碼農，專一互聯網編程技術分享，關注公衆號，回覆關鍵字，能夠領取系列編程學習視頻哦，前端、java、ios、安卓、c++、python應用盡有。