Vue面試題

1.說說MVVM設計模式

• M: Model(模型), vue中是data(爲view提供數據) (Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。)
• V: View(視圖), vue中是模板頁面(顯示data中的數據) (View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。)
• VM: ViewModel(視圖模型), vue中是Vue實例對象(管理者: 數據綁定/DOM監聽) (ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，鏈接Model和View)。
• 在MVVM架構下，View和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model和 ViewModel 之間的交互是雙向的， 所以View數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。
• ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理

2.說說你對計算屬性的理解

• 何時用計算屬性?
  • 模板顯示要顯示的數據是根據n個已有的相關數據進行計算來肯定
  • getter: get方法, 當讀取屬性值時/相關數據發生了改變自動調用, 根據相關數據進行計算並返回結果, this就是vm
  • setter: set方法, 當修改了當前屬性的值自動調用, 監視屬性值的變化去更新相關數據, this就是vm
• 在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式
• 好處：
  • ①使得數據處理結構清晰；
  • ②依賴於數據，數據更新，處理結果自動更新；
  • ③計算屬性內部this指向vm實例；
  • ④在template調用時，直接寫計算屬性名便可；
  • ⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；
  • ⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

3.說說回調函數的判斷及相關問題

• 條件：
  • 是你定義的
  • 你沒有調用
  • 但最終執行了（在後面的某個階段或者某個條件下）
• 關於回調函數相關的3個問題
  • 何時調用
  • 用來作什麼的
  • this是誰 （只要是vue控制的回調函數 ，this都是vm）

4.說說2種類型的數據容器

1.對象

• 屬性值纔是咱們要存的數據
• 屬性名是數據的標識名稱，根據標識名來操做數據

2.數組

• 數組中的元素就是咱們要存的數據 元素的下標就是數據的標識名稱。根據標識名來操做數據

選擇哪一種容器？

• 通常有序的用數組，不強調順序的用對象
• 若是有須要根據標識數據查找數據，用對象容器比用數組容器效率高

5.git的6個基本操做

1. 建立本地倉庫
2. 建立遠程倉庫
3. 將本地倉庫的代碼推送到遠程倉庫
4. 若是本地代碼有更新，提交到本地倉庫，推送到遠程倉庫
5. 若是遠程倉庫有更新，拉取到本地倉庫
6. 將本地倉庫克隆到本地

6.data中的數組與對象屬性不一樣處理

• 數組：重寫數組更新數組元素的方法，只要調用數組的這些方法，就會更新相應的界面
• 對象：對對象中的屬性進行setter監視，只要設置了新的屬性值，就會更新相應的界面

7.區別compute於method和watch

• computed與method：computed有緩存能夠避免重複計算，而method不能夠
• computed與watch：
  • get（）：能夠監視全部依賴數據，編碼簡潔，但只能同步計算產生一個須要顯示的結果數據
  • watch：能夠監視全部依賴數據，編碼麻煩，，能夠進行異步/長時間處理後更新數據顯示

8.函數的兩個角色，方法與屬性，方法與函數

• 函數的兩個角色：
  • 函數：經過（）調用
  • 對象：經過.操做屬性或方法，此時能夠稱之爲函數對象
• 方法與屬性
  • 方法是一個特別的屬性：屬性值是函數
• 方法與函數
  • 在對象內定義的常稱爲方法，經過對象調用的常稱爲方法，其餘常稱爲函數

9.寫出7個指令及其做用

• v-text: 設置標籤體文本
• v-html: 設置標籤體子標籤
• v-if/v-else/v-show: 顯示/隱藏
• v-for: 遍歷顯示列表
• v-bind: 強制綁定表達式, 簡寫:
• v-on: 綁定事件監聽, 簡寫@
• v-model: 雙向數據綁定
• ref：爲某個元素註冊一個惟一標識，vue對象經過$els屬性訪問這個標識

10. 寫出vue 7個配置選項及其做用

• el: 最外層元素選擇器
• props: 聲明接收哪些屬性
• data: 狀態數據
• computed: 計算屬性
• methods: 事件回調函數
• watch: 監視屬性變化
• directives: 註冊局部指令
• filters: 註冊局部過濾器
• components: 配置組件

11. 說說vue的生命週期

• 1.初始化
  • beforeCreate()
  • created()
  • beforeMount()
  • mounted(): 異步任務(發ajax請求/啓動定時器)
• 2.更新
  • beforeUpdate()
  • updated()
• 3.死亡
  • beforeDestroy(): 收尾工做(清除定時器)
  • destroyed()

12. 說說項目開發中經常使用的ES6新語法

• 定義變量/常量: const/let
• 解構賦值: let {a, b} = this.props / import {aa} from 'xxx' / function f ({name}) {}
• 對象的簡潔表達: {a, b, c () {}}
• 箭頭函數:
  • 組件的自定義方法: xxx = () => {}
  • 匿名函數做爲實參
  • 優勢:
    • 簡潔
    • 沒有本身的this,使用引用this查找的是外部this
• 擴展運算符: ...
• 類: class/extends/constructor/super
• ES6模塊化: export/default/import
• 異步: promise, async/await

13. 比較函數的call()/apply()/bind()

• 1). call(obj, param1, param2)/apply(obj, [[param1, param2])
  • 調用/執行函數
  • 只是強制指定函數中的this爲第一個參數指定的對象
  • 若是函數執行須要傳參數, call是依次傳遞, apply須要封裝成數組傳遞
• 2). bind()
  • 返回一個新函數, 不會自動執行, 須要手動執行
  • 強制指定函數中的this爲第一個參數指定的對象
  • 新函數內部會原樣調用原函數

14. babel的插件和預設

將來版本 ECMAScript 標準經歷五個階段：Strawman（稻草人），Proposal（提議），Draft（草案），Candidate（候選）以及 Finished （完成）
    也就是對應 stage0、stage一、stage二、stage三、stage4 五個階段
    babel經常使用的預設包:
        es2015：包含 es2015 語法標準全部相關插件
        es2016：包含 es2016 語法標準全部相關插件
        es2017：包含 es2017 語法標準全部相關插件
        latest：包含從 2015 開始歷年語法標準全部相關插件
        env：在 latest 基礎上提供環境配置能力，好比能夠配置只支持某一個瀏覽器的某幾個版本，會自動按需啓用、禁用插件
        stage-0：包含處於標準提案 stage 0 階段的語法全部相關插件
        stage-1：包含處於標準提案 stage 1 階段的語法全部相關插件
        stage-2：包含處於標準提案 stage 2 階段的語法全部相關插件
        stage-3：包含處於標準提案 stage 3 階段的語法全部相關插件
    預設包與插件包的關係
        一個插件包只能解析1種語法
        預設包是n個插件包的的集合包
    babel的配置: .babelrc
        {
          presets: [], // 配置全部須要的預設包
          plugins: [], // 配置額外須要的插件包
        }
複製代碼

15. props和v-model

• 問題: v-model指向父組件傳入的屬性, 會致使直接更新父組件的數據, 這違背了組件化開發單向數據流的基本原則
• 解決:
  • 方法1: data + watch
  • 方法2: 計算屬性get + set

16.說說vue組件間通訊的幾種方式

• 1.props：
  • 父子組件間通訊的基本方式
  • 屬性值的兩大類型：
    • 通常：父組件 -->子組件
    • 函數：子組件 -->父組件
  • 隔層組件間傳遞：必須逐層傳遞（麻煩）
  • 兄弟組件間：必須藉助父組件（麻煩）
• 2.Vue自定義事件
  • 方式一：
    • 給子組件標籤綁定事件監聽
    • 子組件向父組件的通訊方式
    • 功能相似於function props
    • 不適合隔層組件和兄弟組件間的通訊
  • 方式二：經過單獨的vm對象綁定監聽/分發事件
    • 任意組件間通訊
• 3.消息訂閱和發佈（pubsub-js）
  • 適合於任何關係的組件間通訊
  • 缺點：管理不夠集中
• 4.vuex
  • 多組件共享狀態（數據的管理）
  • 組件間的關係也沒有限制
  • 功能比pubsub強大，更適用於vue項目
• 5.slot
  • 父組件向子組件通訊
  • 通訊是帶數據的標籤
  • 注意：標籤是在父組件中解析

17.組件化編碼流程和2個重要問題

• 流程
  • 1.拆分組件：拆分界面，定義組件
  • 2.靜態組件
  • 3.動態組件
    • 動態初始化顯示
    • 交互
• 2個問題
  • 1.數據保存在哪一個組件中？ //哪一個組件須要仍是哪些組件須要
  • 2.更新數據的方法定義在哪一個組件？ //與數據同在一個組件

18.詳細說明如何判斷函數中的this

• 正常狀況：執行函數的方式決定了函數中的this
  • 1.直接調用：fn() - ->window
  • 2.new調用： new fn() - ->新建立的對象
  • 3.對象調用： obj.fn() - ->obj對象
  • 4.call/apply調用 ：fn.call(obj) - -> 第一個參數指定的對象
• 特別狀況：
  • bind()返回的函數：fn2 = fn.bind(obj) - -> fn2()第一個參數指定的對象
  • 箭頭函數：
    • 定時器回調/ajax回調/數組遍歷相關方法回調 - ->window
    • dom事件監聽回調 - - > dom元素
    • 組件生命週期回調 - - > 組件對象
• 在開發中咱們常常會利用箭頭函數/bind()來改變this 的指向

19.關於2個引用變量指向同一個對象的2個問題

• 兩個引用變量指向同一個對象，經過一個引用變量改變對象內部的數據，另外一個引用變量看到的新的
• 兩個引用變量指向同一個對象，讓一個引用變量指向一個新的對象，另外一個引用變量看到的仍是原來的對象

20.說說讀取表達式a.b的值的查找流程

• 先查找a，沿着做用域鏈中，找不到報錯（變量未定義）
• 找到後查找對象上的b屬性，查找原型鏈，若是找不到返回undefined

21.說說vue項目中如何與後臺通訊

• 1.經過ajax請求與後臺通訊
• 2.經常使用的庫：
  • vue-resource：vue的插件，用於vue1.x
  • axios: 獨立的第三方庫，用於vue2.x
  • fetch: 較新的原生方式，但須要引入兼容包：fetch.js
• 3.執行請求代碼的時機
  • 初始化異步顯示：mounted()
  • 特色用戶操做後異步顯示：事件回調函數或相關函數中

22.說說你對事件處理機制的理解

• Dom事件：
  • 綁定事件監聽
    • 事件名(類型): 只有有限的幾個, 不能隨便寫
    • 回調函數: 接收包含相關數據的event, 處理事件
  • 用戶操做界面自動觸發事件(event)
    • 事件名(類型)
    • 數據: event
• 自定義事件（如vue自定義事件/pubsub等）
  • 綁定事件監聽 * 事件名(類型): 任意 * 回調函數: 經過形參接收數據, 在函數體處理事件
  • 觸發(emit)/分發(dispatch)事件(編碼) * 事件名(類型): 與綁定的事件監聽的事件名一致 * 數據: 會自動傳遞給回調函數

23.async/await 的做用和使用

• 1.做用：
  • 簡化promise的使用（再也不使用then()/catch()來指定成功或者失敗的回調函數）
  • 以同步編碼的方式實現異步流程（沒有回調函數）
• 2.哪裏使用await？
  • 在返回promise對象的表達式左側，爲了直接獲得異步返回的結果，而不是promise對象
• 3.哪裏使用async？
  • 使用了await的函數定義左側

24.GET請求的2種請求參數

• 1. query參數:
     • 路由path: /register
     • 請求path: /register?username=xxx&password=yyy
     • 獲取參數: req.query.username
• 2. param參數:
     • 路由path: /register/:username/:password
     • 請求path: /register/xxx/123
     • 獲取參數: req.params.username

25.vm對象與組件對象的關係

• 1.組件對象是Vue的子類型對象，Vue原型對象上的屬性/方法全部組件對象均可以訪問
• 2.一旦將某個數據或行爲添加到Vue原型對象上，那全部組件中均可經過this輕鬆訪問
• 3.事件總線（EventBus）對象的存儲：Vue.prototype.eventBus

26.vue-router提供了哪些語法

• 1.1個函數：
  • VueRouer：路由構建函數，用於建立路由器對象，配置路由
• 2.2個對象：
  • $route:表明當前路由的對象，包含當前路由相關信息（path，params參數，query參數）
  • $router:表明路由器對象，包含控制路由跳轉的方法（push/replce/back()）
• 3.2個標籤：
  • router-link>:路由連接，生成路由連接
  • router-view>:路由視圖，顯示當前路由組件

27.說說vue的數據代理

• 經過一個對象（vm）代理對另外一個對象（data）中屬性的操做（讀/寫）
• 好處：更方便的操做data中的數據
• 基本實現流程：
  • 經過Object.defineProperty()給vm添加與data對象的屬性對應的屬性描述符
  • 全部添加的屬性都包含getter/setter
  • 在getter/setter內部去操做data中對應的屬性數據

28.說說vue模板解析

• 1.目的
  • 實現初始化顯示
• 2.總體流程
  • 將el的全部子節點取出，添加到一個新建的文檔fragment對象中
  • 對fragment中的全部層次子節點遞歸進行編譯解析處理
  • 將解析後的fragment添加到el中顯示
• 3.編譯/解析包含大括號表達式的文本節點:textNode.textContent = value
• 4.編譯事件指令：elementNode.addEventListener('eventName',callback)
• 5.編譯通常指令：elementNode.xxx = value

29.說說數據綁定的理解和基本原理

• 做用;實現數據的更新顯示
• 基本原理：數據劫持 + 訂閱者 - 發佈者
  • 在observe中，經過Object.defineProperterty()給data 中全部屬性添加setter/getter,實現數據劫持
  • 爲每一個data中的屬性建立一個對應的dep對象（訂閱器）
  • 爲模板中的每一個表達式建立對應的watcher對象（訂閱者），並關聯到對應的dep上
  • 一旦data中的數據發生變化，setter（發佈者）會經過dep對象通知全部關聯的watcher，watcher收到通知後就更新對應的節點

30.vue實現數據雙向綁定的原理

• 雙向數據綁定是創建在單向數據綁定的基礎上的，因此先簡單說清楚單向數據綁定，再說雙向
• vue單向數據綁定的實現：
  • 數據劫持 + 訂閱者 - 發佈模式的方式
  • 經過Object.defineProperty()來劫持/監視data中的屬性，在數據變更時發佈消息給全部訂閱者，每一個訂閱者去更新對應的DOM節點
  • 雙向數據綁定：給元素綁定input監聽，一旦輸入改變了，將最新的值保存到對應的屬性上

31.請說說你對vue生命週期的理解

• vue生命週期分爲8個階段：建立前/後，載入前/後，更新前/後，銷燬前/後
• beforeCreate（建立前） 在數據觀測和初始化事件還未開始
• created（建立後） 完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來
• beforeMount（載入前） 在掛載開始以前被調用，相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上。
• mounted（載入後） 在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。
• beforeUpdate（更新前） 在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
• updated（更新後） 在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。
• beforeDestroy（銷燬前） 在實例銷燬以前調用。實例仍然徹底可用。
• destroyed（銷燬後） 在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。

什麼vue是生命週期？

• Vue實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom -> 渲染、銷燬等一系列過程，稱之爲Vue的生命週期

vue生命週期的做用是什麼？

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

第一次頁面加載會觸發哪幾個鉤子？

• 會觸發beforeCreate（建立前）、created（建立後）、beforeMoun（載入前）、mounted（載入後）這幾個 。

DOM渲染在哪一個週期就已經完成了

• DOM渲染在mounted（載入後）中就已經完成了

32.Vue的路由實現：hash模式和history模式

• hash模式： 在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取。特色：hash雖然在URL中，但不被包括在HTTP請求中，用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。
• history模式：history採用HTML的新特性，且提供了兩個新方法，pushState（），replacState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 www.xxx.com/items/id。後端… /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」

33.vue路由的鉤子函數

• 首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能
• beforeEach主要有三個參數to、from、next：
• to：route即將進入的目標路由對象
• from：route當前導航正要離開的路由
• next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉

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

35.vue中key值的做用？

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

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

• 優勢：Vue的目標是經過儘量簡單的API實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好
• 缺點：不支持低版本的瀏覽器，最低只支持到IE9，不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕，須要自行實現前進，後退。

37.css只在當前組件起做用

• 在style標籤中寫入scoped便可。

38.router的區

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

39. Vue.js是什麼?

• 一位華裔前Google工程師(尤雨溪)開發的前端js庫
• 做用: 動態構建用戶界面
• 特色:
  • 遵循MVVM模式
  • 編碼簡潔, 體積小, 運行效率高, 移動/PC端開發
  • 它自己只關注UI, 能夠輕鬆引入vue插件和其它第三庫開發項目
• 與其它框架的關聯:
  • 借鑑angular的模板和數據綁定技術
  • 借鑑react的組件化和虛擬DOM技術
• vue包含一系列的擴展插件(庫):
  • vue-cli: vue腳手架
  • vue-resource(axios): ajax請求
  • vue-router: 路由
  • vuex: 狀態管理
  • vue-lazyload: 圖片懶加載
  • vue-scroller: 頁面滑動相關
  • mint-ui: 基於vue的組件庫(移動端)
  • element-ui: 基於vue的組件庫(PC端)

40.vue.js的兩個核心是什麼？

• 數據驅動、組件系統

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

• 每一個組件都是vue的實例
• 組件共享data屬性，當data的值是同一個引用類型的值時，改變其中一個會影響其餘

42.指令v-el的做用是什麼？

• 提供一個在頁面上已存在的DOM元素做爲Vue實例的掛載目標，能夠是一個css選擇器，也能夠是一個HTMLElement實例

43.對keep-alive的瞭解

• keep-alive是Vue內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。
• 在vue2.1.0版本以後，keep-alive新加入了兩個屬性：include（包含的組件緩存）與exclude（排除的組件不緩存，優先級大於include）
• 使用方法：

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 該組件是否緩存取決於include和exclude屬性 -->
  </component></keep-alive>
複製代碼

• 參數解釋：
  • include - 字符串或正則表達式，只有名稱匹配的組件會被緩存
  • exclude - 字符串或正則表達式，任何名稱匹配的組件都不會被緩存
  • include 和exclude 的屬性容許組件有條件地緩存。兩者均可以用"," 分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind