Vue最全知識點，面試必備（基礎到進階，覆蓋vue3.0，持續更新整理，歡迎補充討論）

聲明：本篇文章純屬筆記性文章，非總體原創，是對vue知識的整理，對本身有很大幫助才分享出來，參考文章傳送:1.童歐巴對vue知識的整理 2.我是你的超級英雄對vue知識的整理 3.vue官網

基礎篇

說說你對MVVM的理解

• Model-View-ViewModel的縮寫，Model表明數據模型，View表明UI組件,ViewModel將Model和View關聯起來
• 數據會綁定到viewModel層並自動將數據渲染到頁面中，視圖變化的時候會通知 viewModel層更新數據

瞭解mvc/mvp/mvvm的區別

Vue2.x響應式數據/雙向綁定原理

• Vue 數據雙向綁定主要是指： 數據變化更新視圖，視圖變化更新數據。其中，View變化更新Data，能夠經過事件監聽的方式來實現，因此 Vue數據雙向綁定的工做主要是如何 根據Data變化更新View。
• 簡述：

  • 當你把一個普通的 JavaScript 對象傳入 Vue 實例做爲 data 選項，Vue 將遍歷此對象全部的 property，並使用 Object.defineProperty 把這些 property 所有轉爲 getter/setter。
  • 這些 getter/setter 對用戶來講是不可見的，可是在內部它們讓 Vue 可以追蹤依賴，在 property 被訪問和修改時通知變動。
  • 每一個組件實例都對應一個 watcher 實例，它會在組件渲染的過程當中把「接觸」過的數據 property 記錄爲依賴。以後當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件從新渲染。

• 深刻理解：

  • 監聽器 Observer：對數據對象進行遍歷，包括子屬性對象的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個對象的某個值賦值，就會觸發 setter，那麼就能監聽到了數據變化。
  • 解析器 Compile：解析 Vue 模板指令，將模板中的變量都替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，調用更新函數進行數據更新。
  • 訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通訊的橋樑 ，主要的任務是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發解析器 Compile 中對應的更新函數。每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新——這是一個典型的觀察者模式
  • 訂閱器 Dep：訂閱器採用 發佈-訂閱 設計模式，用來收集訂閱者 Watcher，對監聽器 Observer 和 訂閱者 Watcher 進行統一管理。

你知道Vue3.x響應式數據原理嗎？

• Vue3.x改用Proxy替代Object.defineProperty。
• 由於Proxy能夠直接監聽對象和數組的變化，而且有多達13種攔截方法。而且做爲新標準將受到瀏覽器廠商重點持續的性能優化。
• Proxy只會代理對象的第一層，Vue3是怎樣處理這個問題的呢？

  • 判斷當前Reflect.get的返回值是否爲Object，若是是則再經過reactive方法作代理， 這樣就實現了深度觀測。
  • 監測數組的時候可能觸發屢次get/set，那麼如何防止觸發屢次呢？咱們能夠判斷key是否爲當前被代理對象target自身屬性，也能夠判斷舊值與新值是否相等，只有知足以上兩個條件之一時，纔有可能執行trigger。

Proxy 與 Object.defineProperty 優劣對比

• Proxy 的優點以下:

  • Proxy 能夠直接監聽對象而非屬性；
• Proxy 能夠直接監聽數組的變化；

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

  • 兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,並且沒法用 polyfill 磨平，所以 Vue 的做者才聲明須要等到下個大版本( 3.0 )才能用 Proxy 重寫。

VUEX篇

Vuex 是什麼？

運用到了js設計模式中的單例模式，單例模式想要作到的是，無論咱們嘗試去建立多少次，它都只給你返回第一次所建立的那惟一的一個實例。

• Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。每個 Vuex 應用的核心就是 store（倉庫）。「store」 基本上就是一個容器，它包含着你的應用中大部分的狀態 ( state )。

  • Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
  • 改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化。

Vuex 使用單一狀態樹，用一個對象就包含了所有的應用層級狀態。至此它便做爲一個「惟一數據源 (SSOT)」而存在。這也意味着，每一個應用將僅僅包含一個 store 實例。單一狀態樹讓咱們可以直接地定位任一特定的狀態片斷，在調試的過程當中也能輕易地取得整個當前應用狀態的快照。 ——Vuex官方文檔

• 主要包括如下幾個模塊：

  • State：定義了應用狀態的數據結構，能夠在這裏設置默認的初始狀態。
  • Getter：容許組件從 Store 中獲取數據，mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性。
  • Mutation：是惟一更改 store 中狀態的方法，且必須是同步函數。
  • Action：用於提交 mutation，而不是直接變動狀態，能夠包含任意異步操做。
  • Module：容許將單一的 Store 拆分爲多個 store 且同時保存在單一的狀態樹中。

什麼狀況下使用 Vuex？

• 若是應用夠簡單，最好不要使用 Vuex，一個簡單的 store 模式便可
• 須要構建一箇中大型單頁應用時，使用Vuex能更好地在組件外部管理狀態

Vuex和單純的全局對象有什麼區別？

• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
• 不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

爲何 Vuex 的 mutation 中不能作異步操做？

• Vuex中全部的狀態更新的惟一途徑都是mutation，異步操做經過 Action 來提交 mutation實現，這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。
• 每一個mutation執行完成後都會對應到一個新的狀態變動，這樣devtools就能夠打個快照存下來，而後就能夠實現 time-travel 了。若是mutation支持異步操做，就沒有辦法知道狀態是什麼時候更新的，沒法很好的進行狀態的追蹤，給調試帶來困難。

新增：vuex的action有返回值嗎？返回的是什麼？

• store.dispatch 能夠處理被觸發的 action 的處理函數返回的 Promise，而且 store.dispatch 仍舊返回 Promise
• Action 一般是異步的，要知道 action 何時結束或者組合多個 action以處理更加複雜的異步流程，能夠經過定義action時返回一個promise對象，就能夠在派發action的時候就能夠經過處理返回的 Promise處理異步流程

一個 store.dispatch 在不一樣模塊中能夠觸發多個 action 函數。在這種狀況下，只有當全部觸發函數完成後，返回的 Promise 纔會執行。

新增：爲何不直接分發mutation,而要經過分發action以後提交 mutation變動狀態

• mutation 必須同步執行，咱們能夠在 action 內部執行異步操做
• 能夠進行一系列的異步操做，而且經過提交 mutation 來記錄 action 產生的反作用（即狀態變動）

常規篇

computed 和 watch 的區別和運用的場景？

• computed：是計算屬性，依賴其它屬性值，而且 computed 的值有 緩存，只有它 依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；
• watch：沒有緩存性，更多的是「 觀察」的做用，相似於某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行後續操做；當咱們須要深度監聽對象中的屬性時，能夠打開deep：true選項，這樣便會對對象中的每一項進行監聽
• 運用場景：

  • 當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed，由於能夠利用 computed 的緩存特性，避免每次獲取值時，都要從新計算；
  • 當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch，使用watch選項容許咱們執行異步操做 ( 訪問一個 API )，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的。

Vue2.x組件通訊有哪些方式？

• 父子組件通訊

  • 事件機制(**父->子props,子->父 $on、$emit)
  • 獲取父子組件實例 $parent、$children
  • Ref 獲取實例的方式調用組件的屬性或者方法
  • Provide、inject (不推薦使用，組件庫時很經常使用)
• 兄弟組件通訊

  • eventBus 這種方法經過 一個空的 Vue實例做爲中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通訊，包括父子、隔代、兄弟組件

  Vue.prototype.$bus = new Vue

  • Vuex
• 跨級組件通訊

  • Vuex
  • $attrs、$listeners
  • Provide、inject

說一下v-if和v-show的區別

• 當條件不成立時，v-if不會渲染DOM元素，v-show操做的是樣式(display)，切換當前DOM的顯示和隱藏。
• v-if 適用於在運行時不多改變條件，不須要頻繁切換條件的場景；
• v-show 則適用於須要很是頻繁切換條件的場景。

爲何 v-for 和 v-if 不建議用在一塊兒

• 當 v-for 和 v-if 處於同一個節點時，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。若是要遍歷的數組很大，而真正要展現的數據不多時，這將形成很大的性能浪費
• 這種場景建議使用 computed，先對數據進行過濾

組件中的data爲何是一個函數？

• 一個組件被複用屢次的話，也就會建立多個實例。本質上，這些實例用的都是同一個構造函數。
• 若是data是對象的話，對象屬於引用類型，會影響到全部的實例。因此爲了保證組件不一樣的實例之間data不衝突，data必須是一個函數。

子組件爲何不能夠修改父組件傳遞的Prop？/怎麼理解vue的單向數據流？

• Vue提倡單向數據流,即父級props的更新會流向子組件,可是反過來則不行。
• 這是爲了防止意外的改變父組件狀態，使得應用的數據流變得難以理解。
• 若是破壞了單向數據流，當應用複雜時，debug 的成本會很是高。

v-model是如何實現雙向綁定的？

• v-model是用來在表單控件或者組件上建立雙向綁定的
• 他的本質是v-bind和v-on的語法糖
• 在一個組件上使用v-model，默認會爲組件綁定名爲value的prop和名爲input的事件

nextTick的實現原理是什麼？

• 在下次 DOM 更新循環結束以後執行延遲迴調，在修改數據以後當即使用 nextTick 來獲取更新後的 DOM。
• nextTick主要使用了 宏任務和 微任務。
• 根據執行環境分別嘗試採用Promise、MutationObserver、setImmediate，若是以上都不行則採用setTimeout定義了一個異步方法，屢次調用nextTick會將方法存入隊列中，經過這個異步方法清空當前隊列。

Vue不能檢測數組的哪些變更？Vue 怎麼用 vm.$set() 解決對象新增屬性不能響應的問題 ？

• Vue 不能檢測如下數組的變更：

  • 當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
  • 當你修改數組的長度時，例如：vm.items.length = newLength
  • 解決辦法：

    • 第一類問題

      // 法一：Vue.set
      Vue.set(vm.items, indexOfItem, newValue)
      // 法二：Array.prototype.splice
      vm.items.splice(indexOfItem, 1, newValue)
      複製代碼

    • 第二類問題，可以使用 splice：

      vm.items.splice(newLength)
      複製代碼

• vm.$set 的實現原理是：

  • 若是目標是數組，直接使用數組的 splice 方法觸發相應式；
  • 若是目標是對象，會先判讀屬性是否存在、對象是不是響應式，最終若是要對屬性進行響應式處理，則是經過調用 defineReactive 方法進行響應式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性採用 Object.defineProperty 動態添加 getter 和 setter 的功能所調用的方法）

Vue事件綁定原理是什麼？

• 原生事件綁定是經過addEventListener綁定給真實元素的，組件事件綁定是經過Vue自定義的 $on實現的。

說一下虛擬Dom以及key屬性的做用

• 因爲在瀏覽器中操做DOM是很昂貴的。頻繁的操做DOM，會產生必定的性能問題。這就是虛擬Dom的產生緣由。
• Virtual DOM本質就是用一個 原生的JS對象去描述一個DOM節點。是對真實DOM的一層抽象。(也就是源碼中的VNode類，它定義在src/core/vdom/vnode.js中。)
• 虛擬 DOM 的實現原理主要包括如下 3 部分：

  • 用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；
  • diff 算法 — 比較兩棵虛擬 DOM 樹的差別；
  • pach 算法 — 將兩個虛擬 DOM 對象的差別應用到真正的 DOM 樹。
• key 是爲 Vue 中 vnode 的惟一標記，經過這個 key，咱們的 diff 操做能夠更準確、更快速

  • 更準確：由於帶 key 就不是就地複用了，在 sameNode 函數a.key === b.key對比中能夠避免就地複用的狀況。因此會更加準確。
  • 更快速：利用 key 的惟一性生成 map 對象來獲取對應節點，比遍歷方式更快

爲何不建議用index做爲key?

• 不建議 用index 做爲 key，和沒寫基本上沒區別，由於無論你數組的順序怎麼顛倒，index 都是 0, 1, 2 這樣排列，致使 Vue 會複用錯誤的舊子節點，作不少額外的工做

生命週期篇

說一下你對Vue的生命週期的理解

• 簡單回答

  • beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
  • keep-alive 有本身獨立的鉤子函數 activated 和 deactivated。
• 複雜回答

生命週期	發生了什麼
beforeCreate	在當前階段data、methods、computed以及watch上的數據和方法都不能被訪問
created	在實例建立完成後發生，當前階段已經完成了數據觀測，也就是可使用數據，更改數據，在這裏更改數據不會觸發updated函數。能夠作一些初始數據的獲取，在當前階段沒法與Dom進行交互，若是非要想，能夠經過vm.$nextTick來訪問Dom
beforeMount	發生在掛載以前，在這以前template模板已導入渲染函數編譯。而當前階段虛擬Dom已經建立完成，即將開始渲染。在此時也能夠對數據進行更改，不會觸發updated
mounted	在掛載完成後發生，在當前階段，真實的Dom掛載完畢，數據完成雙向綁定，能夠訪問到Dom節點，使用$refs屬性對Dom進行操做
beforeUpdate	發生在更新以前，也就是響應式數據發生更新，虛擬dom從新渲染以前被觸發，你能夠在當前階段進行更改數據，不會形成重渲染
updated	發生在更新完成以後，當前階段組件Dom已完成更新。要注意的是避免在此期間更改數據，由於這可能會致使無限循環的更新
beforeDestroy	發生在實例銷燬以前，在當前階段實例徹底能夠被使用，咱們能夠在這時進行善後收尾工做，好比清除計時器
destroyed	發生在實例銷燬以後，這個時候只剩下了dom空殼。組件已被拆解，數據綁定被卸除，監聽被移出，子實例也通通被銷燬
activited keep-alive 專屬	組件被激活時調用
deactivated keep-alive 專屬	組件被銷燬時調用

Vue中組件生命週期調用順序是什麼樣的？

• 組件的調用順序都是先父後子,渲染完成的順序是先子後父。
• 組件的銷燬操做是先父後子，銷燬完成的順序是先子後父。

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

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

你的接口請求通常放在哪一個生命週期中？

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

  • 能更快獲取到服務端數據，減小頁面loading 時間；
  • ssr不支持 beforeMount 、mounted 鉤子函數，因此放在 created 中有助於一致性；

路由篇

vue路由hash模式和history模式實現原理分別是什麼，他們的區別是什麼？

• hash 模式：

  • #後面 hash 值的變化，不會致使瀏覽器向服務器發出請求，瀏覽器不發出請求，就不會刷新頁面
  • 經過監聽 hashchange 事件能夠知道 hash 發生了哪些變化，而後根據 hash 變化來實現更新頁面部份內容的操做。
• history 模式：

  • history 模式的實現，主要是 HTML5 標準發佈的兩個 API， pushState 和 replaceState，這兩個 API 能夠在改變 url，可是不會發送請求。這樣就能夠監聽 url 變化來實現更新頁面部份內容的操做
• 區別

  • url 展現上，hash 模式有「#」，history 模式沒有
  • 刷新頁面時，hash 模式能夠正常加載到 hash 值對應的頁面，而 history 沒有處理的話，會返回 404，通常須要後端將全部頁面都配置重定向到首頁路由
  • 兼容性，hash 能夠支持低版本瀏覽器和 IE。

路由懶加載是什麼意思？如何實現路由懶加載？

• 路由懶加載的含義：把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件

• 實現：結合 Vue 的異步組件和 Webpack 的代碼分割功能

  • 1. 能夠將異步組件定義爲返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件自己)

    const Foo = () => Promise.resolve({ /* 組件定義對象 */ })
    複製代碼

  • 2. 在 Webpack 2 中，咱們可使用動態 import語法來定義代碼分塊點 (split point)

    import('./Foo.vue') // 返回 Promise
    複製代碼

  • 結合這二者，這就是如何定義一個可以被 Webpack 自動代碼分割的異步組件

    const Foo = () => import('./Foo.vue')
    const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})
    複製代碼

• 使用命名 chunk，和webpack中的魔法註釋就能夠把某個路由下的全部組件都打包在同個異步塊 (chunk) 中

chunkconst Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
複製代碼

Vue-router 導航守衛有哪些

• 全局前置/鉤子：beforeEach、beforeResolve、afterEach
• 路由獨享的守衛：beforeEnter
• 組件內的守衛：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

---

進階篇

說說vue和react的異同

• 同

  • 使用 Virtual DOM
  • 提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。
  • 將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。
• 異

  • 在 React 應用中，當某個組件的狀態發生變化時，它會以該組件爲根，從新渲染整個組件子樹（除非使用PureComponent/shouldComponentUpdate），在 Vue 應用中，組件的依賴是在渲染過程當中自動追蹤的，因此係統能精確知曉哪一個組件確實須要被重渲染
  • 在 React 中，一切都是 JavaScript。不只僅是 HTML 能夠用 JSX 來表達，如今的潮流也愈來愈多地將 CSS 也歸入到 JavaScript 中來處理
  • Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統，因此有更豐富的生態系統
  • Vue 提供了CLI 腳手架，能讓你經過交互式的腳手架引導很是容易地構建項目。你甚至可使用它快速開發組件的原型。React 在這方面也提供了create-react-app，可是如今還存在一些侷限性
  • React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP，Vue 和Weex會進行官方合做，Weex 是阿里巴巴發起的跨平臺用戶界面開發框架，同時也正在 Apache 基金會進行項目孵化，另外一個選擇是NativeScript-Vue，一個用 Vue.js 構建徹底原生應用的NativeScript插件

什麼是 mixin ？

• Mixin 使咱們可以爲 Vue 組件編寫可插拔和可重用的功能。
• 若是你但願再多個組件之間重用一組組件選項，例如生命週期 hook、 方法等，則能夠將其編寫爲 mixin，並在組件中簡單的引用它。
• 而後將 mixin 的內容合併到組件中。若是你要在 mixin 中定義生命週期 hook，那麼它在執行時將優化於組件自已的 hook。

在 Vue 實例中編寫生命週期 hook 或其餘 option/properties 時，爲何不使用箭頭函數 ？

• 箭頭函數自已沒有定義 this 上下文中。
• 當你在 Vue 程序中使用箭頭函數 ( => ) 時，this 關鍵字病不會綁定到 Vue 實例，所以會引起錯誤。因此強烈建議改用標準函數聲明。

Vue模版編譯原理知道嗎，能簡單說一下嗎？

簡單說，Vue的編譯過程就是將template轉化爲render函數的過程。會經歷如下階段（生成AST樹/優化/codegen）：

• 首先解析模版，生成AST語法樹(一種用JavaScript對象的形式來描述整個模板)。 使用大量的正則表達式對模板進行解析，遇到標籤、文本的時候都會執行對應的鉤子進行相關處理。
• Vue的數據是響應式的，但其實模板中並非全部的數據都是響應式的。有一些數據首次渲染後就不會再變化，對應的DOM也不會變化。那麼優化過程就是深度遍歷AST樹，按照相關條件對樹節點進行標記。這些被標記的節點(靜態節點)咱們就能夠跳過對它們的比對，對運行時的模板起到很大的優化做用。
• 編譯的最後一步是將優化後的AST樹轉換爲可執行的代碼。

diff算法說一下

• 同級比較，再比較子節點
• 先判斷一方有子節點一方沒有子節點的狀況(若是新的children沒有子節點，將舊的子節點移除)
• 比較都有子節點的狀況(核心diff)
• 遞歸比較子節點

說說你對keep-alive組件的瞭解

• keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，避免從新渲染 ，其有如下特性：

  • 通常結合路由和動態組件一塊兒使用，用於緩存組件；
  • 提供 include 和 exclude 屬性，二者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存，exclude 表示任何名稱匹配的組件都不會被緩存 ，其中 exclude 的優先級比 include 高；
  • 對應兩個鉤子函數 activated 和 deactivated ，當組件被激活時，觸發鉤子函數 activated，當組件被移除時，觸發鉤子函數 deactivated。

說說你對SSR的瞭解

• SSR也就是服務端渲染，也就是將Vue在客戶端把標籤渲染成HTML的工做放在服務端完成，而後再把html直接返回給客戶端
• SSR的優點

  • 更好的SEO
  • 首屏加載速度更快
• SSR的缺點

  • 開發條件會受到限制，服務器端渲染只支持beforeCreate和created兩個鉤子
  • 當咱們須要一些外部擴展庫時須要特殊處理，服務端渲染應用程序也須要處於Node.js的運行環境
  • 更多的服務端負載

你都作過哪些Vue的性能優化？

• 編碼階段

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

  • 預渲染
  • 服務端渲染SSR
• 打包優化

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

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

vue2.x中如何監測數組變化？

• 使用了函數劫持的方式，重寫了數組的方法，Vue將data中的數組進行了原型鏈重寫，指向了本身定義的數組原型方法，當調用數組api時，能夠通知依賴更新。
• 若是數組中包含着引用類型，會對數組中的引用類型再次遞歸遍歷進行監控。這樣就實現了監測數組變化。

說說你對 SPA 單頁面的理解，它的優缺點分別是什麼？

• SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會由於用戶的操做而進行頁面的從新加載或跳轉；取而代之的是利用路由機制實現 HTML 內容的變換，UI 與用戶的交互，避免頁面的從新加載。
• 優勢：

  • 用戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染；
  • 基於上面一點，SPA 相對對服務器壓力小；
  • 先後端職責分離，架構清晰，前端進行交互邏輯，後端負責數據處理；
• 缺點：

  • 初次加載耗時多：爲實現單頁 Web 應用功能及顯示效果，須要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載；
  • 前進後退路由管理：因爲單頁應用在一個頁面中顯示全部的內容，因此不能使用瀏覽器的前進後退功能，全部的頁面切換須要本身創建堆棧管理；
  • SEO 難度較大：因爲全部的內容都在一個頁面中動態替換顯示，因此在 SEO 上其有着自然的弱勢。

對於即將到來的 vue3.0 特性你有什麼瞭解的嗎？

• 監測機制的改變

  • 3.0 將帶來基於代理 Proxy的 observer 實現，提供全語言覆蓋的反應性跟蹤。
  • 消除了 Vue 2 當中基於 Object.defineProperty 的實現所存在的不少限制：
• 只能監測屬性，不能監測對象

  • 檢測屬性的添加和刪除；
  • 檢測數組索引和長度的變動；
  • 支持 Map、Set、WeakMap 和 WeakSet。
• 模板

  • 模板方面沒有大的變動，只改了做用域插槽，2.x 的機制致使做用域插槽變了，父組件會從新渲染，而 3.0 把做用域插槽改爲了函數的方式，這樣只會影響子組件的從新渲染，提高了渲染的性能。
  • 同時，對於 render 函數的方面，vue3.0 也會進行一系列更改來方便習慣直接使用 api 來生成 vdom 。
• 對象式的組件聲明方式

  • vue2.x 中的組件是經過聲明的方式傳入一系列 option，和 TypeScript 的結合須要經過一些裝飾器的方式來作，雖然能實現功能，可是比較麻煩。
  • 3.0 修改了組件的聲明方式，改爲了類式的寫法，這樣使得和 TypeScript 的結合變得很容易
• 其它方面的更改

  • 支持自定義渲染器，從而使得 weex 能夠經過自定義渲染器的方式來擴展，而不是直接 fork 源碼來改的方式。
  • 支持 Fragment（多個根節點）和 Protal（在 dom 其餘部分渲染組建內容）組件，針對一些特殊的場景作了處理。
  • 基於 tree shaking 優化，提供了更多的內置功能。