問的多查的多的vue面試題整理不容錯過，快看有沒有你被問到的題目！

生命週期鉤子函數

Vue 實例有一個完整的生命週期，也就是從開始建立、初始化數據、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，咱們稱這是Vue的生命週期

• Vue中組件生命週期調用順序

生命週期	描述
beforeCreate	組件實例被建立之初，組件的屬性生效以前
created	組件實例已經徹底建立，屬性也綁定，但真實dom尚未生成，$el還不可用
beforeMount	在掛載開始以前被調用：相關的 render 函數首次被調用
mounted	el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子
beforeUpdate	組件數據更新以前調用，發生在虛擬 DOM 打補丁以前
update	組件數據更新以後
activited	keep-alive專屬，組件被激活時調用
deadctivated	keep-alive專屬，組件被銷燬時調用
beforeDestory	組件銷燬前調用
destoryed	組件銷燬後調用

虛擬dom

• 因爲dom操做耗時十分長，且dom對象的體積很大，單個div的dom屬性就有294個之多；
• Virtual DOM 就是用一個原生的 JS 對象去描述一個 DOM 節點，因此它比建立一個 DOM 的代價要小不少。
• VNode 是對真實 DOM 的一種抽象描述，它的核心定義無非就幾個關鍵屬性，標籤名、數據、子節點、鍵值等，其它屬性都是用來擴展 VNode 的靈活性以及實現一些特殊 feature 的。因爲 VNode 只是用來映射到真實 DOM 的渲染，不須要包含操做 DOM 的方法，所以它是很是輕量和簡單的。
• Virtual DOM到真實的dom須要通過如下過程：VNode 的 create、diff、patch

v-model雙向數據綁定原理

vue 雙向數據綁定是經過 數據劫持 結合 發佈訂閱模式 的方式來實現的，也就是說數據和視圖同步，數據發生變化，視圖跟着變化，視圖變化，數據也隨之發生改變； 核心：Object.defineProperty() 方法。

v-model本質上是語法糖，v-model在內部爲不一樣的輸入元素使用不一樣的屬性並拋出不一樣的事件

• text 和 textarea 元素使用 value 屬性和 input 事件
• checkbox 和 radio 使用 checked 屬性和 change 事件
• select 字段將 value 做爲 prop 並將 change 做爲事件

<input v-model="sth" /><!-- 兩者等價 -->
<input :value="sth" @input="sth = $event.target.value" />
複製代碼

computed和watch區別

vue 插槽

設置在自組件內部的插槽像一個盒子，位置由子組件決定，放什麼內容由父組件決定。

實現了內容分發，提升了組件自定義的程度，讓組件變的更加靈活

1. 默認插槽：

無需name屬性，取子組件肚子裏第一個元素節點做爲默認插槽。

<!-- 子組件，組件名：child-component -->
<div class="child-page">
    <h1>子頁面</h1>
    <slot></slot> <!-- 替換爲 <p>hello,world!</p> -->
</div>

<!-- 父組件 -->
<div class="parent-page">
    <child-component>
        <p>hello,world!</p>
    </child-component>
</div>

<!-- 渲染結果 -->
<div class="parent-page">
    <div class="child-page">
        <h1>子頁面</h1>
        <p>hello,world!</p>
    </div>
</div>
複製代碼

1. 具名插槽：

在多個插槽的狀況下使用，利用name標識插槽。

<!-- 子組件，組件名：child-component -->
<div class="child-page">
    <h1>子頁面</h1>
    <slot name="header"></slot>
    <slot></slot>  <!-- 等價於 <slot name="default"></slot> -->
    <slot name="footer"></slot>
</div>

<!-- 父組件 -->
<div class="parent-page">
    <child-component>
        <template v-slot:header>
          <p>頭部</p>  
        </template>
        <template v-slot:footer>
          <p>腳部</p>
        </template>
        <p>身體</p>
    </child-component>
</div>

<!-- 渲染結果 -->
<div class="parent-page">
    <div class="child-page">
        <h1>子頁面</h1>
        <p>頭部</p>
        <p>身體</p>
        <p>腳部</p>
    </div>
</div>
複製代碼

1. 做用域插槽：

子組件給父組件傳遞數據。

<!-- 子組件，組件名：child-component -->
<div class="child-page">
    <h1>子頁面</h1>
    <slot name="header" data="data from child-component."></slot>
</div>

<!-- 父組件 -->
<div class="parent-page">
    <child-component>
        <template v-slot:header="slotProps">
          <p>頭部: {{ slotProps.data }}</p>
        </template>
    </child-component>
</div>

<!-- 渲染結果 -->
<div class="parent-page">
    <div class="child-page">
        <h1>子頁面</h1>
        <p>頭部: data from child-component.</p>
    </div>
</div>
複製代碼

Vue與Angular以及React的區別？

Vue與AngularJS的區別

• Angular採用TypeScript開發, 而Vue可使用javascript也可使用TypeScript
• AngularJS依賴對數據作髒檢查，因此Watcher越多越慢；Vue.js使用基於依賴追蹤的觀察而且使用異步隊列更新，全部的數據都是獨立觸發的。
• AngularJS社區完善, Vue的學習成本較小

Vue與React的區別

• vue組件分爲全局註冊和局部註冊，在react中都是經過import相應組件，而後模版中引用；
• props是能夠動態變化的，子組件也實時更新，在react中官方建議props要像純函數那樣，輸入輸出一致對應，並且不太建議經過props來更改視圖；
• 子組件通常要顯示地調用props選項來聲明它期待得到的數據。而在react中沒必要需，另二者都有props校驗機制；
• 每一個Vue實例都實現了事件接口，方便父子組件通訊，小型項目中不須要引入狀態管理機制，而react必需本身實現；
• vue使用插槽分發內容，使得能夠混合父組件的內容與子組件本身的模板；
• vue多了指令系統，讓模版能夠實現更豐富的功能，而React只能使用JSX語法；
• Vue增長的語法糖computed和watch，而在React中須要本身寫一套邏輯來實現；
• react的思路是all in js，經過js來生成html，因此設計了jsx，還有經過js來操做css，社區的styled-component、jss等；而 vue是把html，css，js組合到一塊兒，用各自的處理方式，vue有單文件組件，能夠把html、css、js寫到一個文件中，html提供了模板引擎來處理。
• react作的事情不多，不少都交給社區去作，vue不少東西都是內置的，寫起來確實方便一些，好比 redux的combineReducer就對應vuex的modules， 好比reselect就對應vuex的getter和vue組件的computed， vuex的mutation是直接改變的原始數據，而redux的reducer是返回一個全新的state，因此redux結合immutable來優化性能，vue不須要。
• react是總體的思路的就是函數式，因此推崇純組件，數據不可變，單向數據流，固然須要雙向的地方也能夠作到，好比結合redux-form，組件的橫向拆分通常是經過高階組件。而vue是數據可變的，雙向綁定，聲明式的寫法，vue組件的橫向拆分不少狀況下用mixin

$route和$router的區別

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

Vue的SPA 如何優化加載速度

• 減小入口文件體積
• 靜態資源本地緩存
• 開啓Gzip壓縮
• 使用SSR,nuxt.js

vue項目中的優化

編碼階段

• 不要在模板裏面寫過多表達式
• 儘可能減小data中的數據，data中的數據都會增長getter和setter，會收集對應的watcher
• v-if和v-for不能連用
• 若是須要使用v-for給每項元素綁定事件時使用事件代理
• SPA 頁面採用keep-alive緩存組件
• 頻繁切換的使用v-show，不頻繁切換的使用v-if
• 循環調用子組件時添加key，key保證惟一
• 使用路由懶加載、異步組件
• 防抖、節流
• 第三方模塊按需導入
• 長列表滾動到可視區域動態加載
• 圖片懶加載

SEO優化

• 預渲染
• 服務端渲染SSR，nuxt.js

打包優化

• 壓縮代碼
• Tree Shaking/Scope Hoisting
• 使用cdn加載第三方模塊
• 多線程打包happypack
• splitChunks抽離公共文件
• sourceMap優化

用戶體驗

• 骨架屏
• PWA漸進式Web應用，使用多種技術來加強web app的功能，讓網頁應用呈現和原生應用類似的體驗。

還可使用緩存(客戶端緩存、服務端緩存)優化、服務端開啓 gzip壓縮等。

vue有了數據響應式，爲什麼還要diff？

核心緣由：粒度

• React經過setState知道有變化了，但不知道哪裏變化了，因此須要經過diff找出變化的地方並更新dom。
• Vue已經能夠經過響應式系統知道哪裏發生了變化，可是全部變化都經過響應式會建立大量Watcher，極其消耗性能，所以vue採用的方式是經過響應式系統知道哪一個組件發生了變化，而後在組件內部使用diff。這樣的中粒度策略，即不會產生大量的Watcher，也使diff的節點減小了，一箭雙鵰。

vue模版編譯

編譯的核心是把 template 模板編譯成 render 函數，主要分爲以下三個步驟：

• 生成AST樹
• 優化
• codegen

MVVM

MVVM是Model-View-ViewModel縮寫，也就是把MVC中的Controller演變成ViewModel。Model層表明數據模型，View表明UI組件，ViewModel是View和Model層的橋樑，數據會綁定到viewModel層並自動將數據渲染到頁面中，視圖變化的時候會通知viewModel層更新數據。

響應式數據原理（Vue2.x & Vue3.0）

Vue2.x在初始化數據時，會使用Object.defineProperty從新定義data中的全部屬性，當頁面使用對應屬性時，首先會進行依賴收集(收集當前組件的watcher)，若是屬性發生變化會通知相關依賴進行派發更細(發佈訂閱模式)。

vue3.0採用es6中的proxy代替Object.defineProperty作數據監聽。

Proxy與Object.defineProperty的優劣對比?

Proxy的優點以下:

• Proxy能夠直接監聽對象而非屬性
• Proxy能夠直接監聽數組的變化
• Proxy有多達13種攔截方法,不限於apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具有的
• Proxy返回的是一個新對象,咱們能夠只操做新的對象達到目的,而Object.defineProperty只能遍歷對象屬性直接修改
• Proxy做爲新標準將受到瀏覽器廠商重點持續的性能優化，也就是傳說中的新標準的性能紅利

Object.defineProperty的優點以下:

• 兼容性好,支持IE9

vue的$nextTick

在下次 DOM 更新循環結束以後執行延遲迴調。nextTick主要使用了宏任務和微任務。根據執行環境分別嘗試採用

• Promise
• MutationObserver
• setImmediate
• 若是以上都不行則採用setTimeout

定義了一個異步方法，屢次調用nextTick會將方法存入隊列中，經過這個異步方法清空當前隊列。

vue組件中data爲何必須是一個函數

複用組件的時候，都會返回一份新的data，至關於每一個組件實例都有本身私有的數據空間，不會共享同一個data對象。

vue中組件通訊的方式

1. 父傳子：props
2. 子傳父：$emit、ref
3. 兄弟：EventBus

vue-router

vue-router是vue的官方插件，主要用來管理前端路由。 對於 Vue 這類漸進式前端開發框架，爲了構建 SPA（單頁面應用），須要引入前端路由系統，這也就是 Vue-Router 存在的意義。前端路由的核心，就在於：改變視圖的同時不會向後端發出請求。

功能有：

• 改變URL且不讓瀏覽器向服務器發出請求
• 檢測URL的改變
• 記錄當前頁面的狀態
• 可使用瀏覽器的前進後退功能
• URL路徑決定頁面如何顯示

history和hash模式的區別

1. 實現原理

hash 模式和 history 模式都屬於瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（經過調用瀏覽器提供的接口）來實現前端路由。

2. 對比表格

區別 \ mode	hash	history
監聽事件	hashChange	popstate
缺點	# 號很差看	子路由刷新40四、ie9及如下不兼容
push操做	window.location.assign	window.history.pushState
replace操做	window.location.replace	window.history.replaceState
訪問操做	window.history.go	window.history.go
後退操做	window.history.go(-1)	window.history.go(-1)
向前操做	window.history.go(1)	window.history.go(1)

3. 關於 popstate 事件監聽路由的侷限 history對象的 back(), forward() 和 go() 三個等操做會主動觸發 popstate 事件，可是 pushState 和 replaceState 不會觸發 popstate 事件，這時咱們須要手動觸發頁面跳轉(渲染)。

4. 關於子路由刷新的解決方式

history模式子路由刷新會404，所以須要後端配合，將未匹配到的路由默認指向html文件

5. 瀏覽器（環境）兼容處理

history 模式中pushState、replaceState是HTML5的新特性，在 IE9 下會強行降級使用 hash 模式，非瀏覽器環境轉換成abstract 模式。

6. router-link router-link點擊至關於調用$router.push方法去修改url

<router-link> 比起寫死的 <a href="..."> 會好一些，理由以下：

1. 不管是 HTML5 history 模式仍是 hash 模式，它的表現行爲一致，因此，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須做任何變更。
2. 在 HTML5 history 模式下，router-link 會守衛點擊事件，讓瀏覽器再也不從新加載頁面。
3. 當你在 HTML5 history 模式下使用 base 選項以後，全部的 to 屬性都不須要寫（基路徑）了。

vue-router路由懶加載

像 vue 這種單頁面應用，若是沒有路由懶加載，運用 webpack 打包後的文件將會很大，形成進入首頁時，須要加載的內容過多，出現較長時間的白屏，運用路由懶加載則能夠將頁面進行劃分，須要的時候才加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時。

vue 路由懶加載有如下三種方式：

1. vue 異步組件
2. ES6 的 import()
3. webpack 的 require.ensure()

1. vue 異步組件 這種方法主要是使用了 resolve 的異步機制，用 require 代替了 import 實現按需加載

export default new Router({
  routes: [
    {
      path: '/home',',
      component: (resolve) => require(['@/components/home'], resolve),
    },
    {
      path: '/about',',
      component: (resolve) => require(['@/components/about'], resolve),
    },
  ],
})
複製代碼

2. ES6 的 import() vue-router 在官網提供了一種方法，能夠理解也是爲經過 Promise 的 resolve 機制。由於 Promise 函數返回的 Promise 爲 resolve 組件自己，而咱們又可使用 import 來導入組件。

export default new Router({
  routes: [
    {
      path: '/home',
      component: () => import('@/components/home'),
    },
    {
      path: '/about',
      component: () => import('@/components/home'),
    },
  ],
})
複製代碼

1. webpack 的 require.ensure() 這種模式能夠經過參數中的 webpackChunkName 將 js 分開打包。

export default new Router({
  routes: [
    {
      path: '/home',
      component: (resolve) => require.ensure([], () => resolve(require('@/components/home')), 'home'),
    },
    {
      path: '/about',
      component: (resolve) => require.ensure([], () => resolve(require('@/components/about')), 'about'),
    },
  ],
})
複製代碼

篇幅有限，還有沒有發出來的題目都前端面試題資料裏，須要完整PDF資料的小夥伴只須要點擊這裏就能夠免費獲取！

有被問到題目的小夥伴們評論區能夠聊聊你是怎麼回答的哦，沒有被問到的更要多看熟記，說不定就會碰到啦~這篇文章對你有幫助請評論點贊支持一波，謝謝！