前端Vue常見面試題

Vue  是一套用於構建用戶界面的漸進式JavaScript框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。

該博客的主要目的是將面試中常見的概念總結，方便快速去了解。

 

 

 

什麼是 mvvm？

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層表明數據模型，也能夠在 Model 中定義數據修改和操做的業務邏輯；View 表明 UI 組件，它負責將數據模型轉化成 UI 展示出來，ViewModel 是一個同步 View 和 Model 的對象。

在 MVVM 架構下，View 和 Model 之間並無直接的聯繫，而是經過 ViewModel 進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以 View 數據的變化會同步到 Model 中，而 Model 數據的變化也會當即反應到 View 上。

ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而 View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做 DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。

mvvm 和 mvc 區別？

mvc 和 mvvm 其實區別並不大。都是一種設計思想。主要就是 mvc 中 Controller 演變成 mvvm 中的 viewModel。mvvm 主要解決了 mvc 中大量的 DOM 操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。和當 Model 頻繁發生變化，開發者須要主動更新到 View 。

vue 的優勢是什麼？

• 低耦合。視圖（View）能夠獨立於 Model 變化和修改，一個 ViewModel 能夠綁定到不一樣的"View"上，當 View 變化的時候 Model 能夠不變，當 Model 變化的時候 View 也能夠不變。
• 可重用性。你能夠把一些視圖邏輯放在一個 ViewModel 裏面，讓不少 view 重用這段視圖邏輯。
• 獨立開發。開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用 Expression Blend 能夠很容易設計界面並生成 xml 代碼。
• 可測試。界面素來是比較難於測試的，而如今測試能夠針對 ViewModel 來寫。

請詳細說下你對 vue 生命週期的理解？

答：總共分爲 8 個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

• 建立前/後： 在 beforeCreate 階段，vue 實例的掛載元素 el 尚未。
• 載入前/後：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但仍是掛載以前爲虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。
• 更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。
• 銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，可是 dom 結構依然存在

組件之間的傳值？

1. 父組件與子組件傳值

//父組件經過標籤上面定義傳值
<template>
    <Main :obj="data"></Main> </template> <script>  //引入子組件  import Main form "./main"   exprot default{  name:"parent",  data(){  return {  data:"我要向子組件傳遞數據"  }  },  //初始化組件  components:{  Main  }  } </script> //子組件經過props方法接受數據 <template> <div>{{data}}</div> </template> <script>  exprot default{  name:"son",  //接受父組件傳值  props:["data"]  } </script>

2. 子組件向父組件傳遞數據

//子組件經過$emit方法傳遞參數
<template>
   <div v-on:click="events"></div> </template> <script>  //引入子組件  import Main form "./main"   exprot default{  methods:{  events:function(){   }  }  } </script> // <template> <div>{{data}}</div> </template> <script>  exprot default{  name:"son",  //接受父組件傳值  props:["data"]  } </script>

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

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

嵌套路由怎麼定義？

在實際項目中咱們會碰到多層嵌套的組件組合而成，可是咱們如何實現嵌套路由呢？所以咱們須要在 VueRouter 的參數中使用 children 配置，這樣就能夠很好的實現路由嵌套。 index.html，只有一個路由出口

<div id="app"> <!-- router-view 路由出口, 路由匹配到的組件將渲染在這裏 --> <router-view></router-view> </div>

main.js，路由的重定向，就會在頁面一加載的時候，就會將 home 組件顯示出來，由於重定向指向了 home 組件，redirect 的指向與 path 的必須一致。children 裏面是子路由，固然子路由裏面還能夠繼續嵌套子路由。

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //引入兩個組件 import home from "./home.vue" import game from "./game.vue" //定義路由 const routes = [ { path: "/", redirect: "/home" },//重定向,指向了home組件 { path: "/home", component: home, children: [ { path: "/home/game", component: game } ] } ] //建立路由實例 const router = new VueRouter({routes}) new Vue({ el: '#app', data: { }, methods: { }, router })

home.vue，點擊顯示就會將子路由顯示在出來，子路由的出口必須在父路由裏面，不然子路由沒法顯示。

路由之間跳轉？

• 聲明式（標籤跳轉） <router-link :to="index">
• 編程式（ js 跳轉） router.push('index')

懶加載（按需加載路由）（常考）

webpack 中提供了 require.ensure()來實現按需加載。之前引入路由是經過 import 這樣的方式引入，改成 const 定義的方式進行引入。

• 不進行頁面按需加載引入方式：

import  home from '../../common/home.vue'

• 進行頁面按需加載的引入方式：

const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

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

vue 框架中狀態管理。在 main.js 引入 store，注入。新建了一個目錄 store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登陸狀態、加入購物車

// 新建 store.js import vue from 'vue' import vuex form 'vuex' vue.use(vuex) export default new vuex.store({ //...code }) //main.js import store from './store' ...

vue-router 有哪幾種導航鉤子?

三種

• 全局導航鉤子
  • router.beforeEach(to, from, next),
  • router.beforeResolve(to, from, next),
  • router.afterEach(to, from ,next)
• 組件內鉤子
  • beforeRouteEnter,
  • beforeRouteUpdate,
  • beforeRouteLeave
• 單獨路由獨享組件
  • beforeEnter

自定義指令(v-check, v-focus) 的方法有哪些? 它有哪些鉤子函數? 還有哪些鉤子函數參數

• 全局定義指令：在 vue 對象的 directive 方法裏面有兩個參數, 一個是指令名稱, 另外一個是函數。
• 組件內定義指令：directives
• 鉤子函數: bind(綁定事件出發)、inserted(節點插入時候觸發)、update(組件內相關更新)
• 鉤子函數參數： el、binding

說出至少 4 種 vue 當中的指令和它的用法

v-if(判斷是否隱藏)、v-for(把數據遍歷出來)、v-bind(綁定屬性)、v-model(實現雙向綁定)

vue 的雙向綁定的原理是什麼(常考)

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

具體步驟： 第一步：須要 observe 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter 這樣的話，給這個對象的某個值賦值，就會觸發 setter，那麼就能監聽到了數據變化

第二步：compile 解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑，主要作的事情是:

• 在自身實例化時往屬性訂閱器(dep)裏面添加本身
• 自身必須有一個 update()方法
• 待屬性變更 dep.notice()通知時，能調用自身的 update() 方法，並觸發 Compile 中綁定的回調，則功成身退。

第四步：MVVM 做爲數據綁定的入口，整合 Observer、Compile 和 Watcher 三者，經過 Observer 來監聽本身的 model 數據變化，經過 Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據 model 變動的雙向綁定效果。

vuex 相關

vuex 有哪幾種屬性

有 5 種，分別是 state、getter、mutation、action、module

vuex 的 store 特性是什麼

• vuex 就是一個倉庫，倉庫裏放了不少對象。其中 state 就是數據源存放地，對應於通常 vue 對象裏面的 data
• state 裏面存放的數據是響應式的，vue 組件從 store 讀取數據，如果 store 中的數據發生改變，依賴這相數據的組件也會發生更新
• 它經過 mapState 把全局的 state 和 getters 映射到當前組件的 computed 計算屬性

vuex 的 getter 特性是什麼

• getter 能夠對 state 進行計算操做，它就是 store 的計算屬性
• 雖然在組件內也能夠作計算屬性，可是 getters 能夠在多給件之間複用
• 若是一個狀態只在一個組件內使用，是能夠不用 getters

vuex 的 mutation 特性是什麼

• action 相似於 muation, 不一樣在於：action 提交的是 mutation,而不是直接變動狀態
• action 能夠包含任意異步操做

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

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

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

不用 vuex 會帶來什麼問題

• 可維護性會降低，你要修改數據，你得維護 3 個地方
• 可讀性降低，由於一個組件裏的數據，你根本就看不出來是從哪裏來的
• 增長耦合，大量的上傳派發，會讓耦合性大大的增長，原本 Vue 用 Component 就是爲了減小耦合，如今這麼用，和組件化的初衷相背

 

axios

axios 是什麼？怎麼使用？描述使用它實現登陸功能的流程

axios 是請求後臺資源的模塊。 npm i axios -S

若是發送的是跨域請求，需在配置文件中 config/index.js 進行配置

 

該博客版權歸原做者全部，此處僅作學習交流。