vue面試題（前置知識）

平平丶淡淡發表於2024-03-18
Vue面試題

一、漸進式框架

Vue是一個框架，也是一個生態，其功能覆蓋了大部分前端開發常見的需求。包含了宣告式渲染、元件化系統、客戶端路由、大規模狀態管理、構建工具等，但vue的核心庫只關注檢視層。在實際開發中，可以根據業務需求的變化，來不斷增加這些功能，實現vue的漸進式增強。

二、宣告式框架

宣告式框架是一種程式設計正規化，它允許開發者更加清晰地表達計算的邏輯或介面元素，而不是具體描述其執行步驟或過程。這種框架的主要特點在於它更關注結果，而不是達到這個結果的過程。

Vue被稱為宣告式框架，主要基於其程式設計模型的特點和方式，以下是幾個關鍵原因：

  1. 關注結果而非過程：Vue允許開發者透過簡潔的模板語法描述最終輸出的HTML和JavaScript狀態之間的關係，而不需要詳細指定達到這些結果的步驟或過程。這種宣告式的方式讓開發者能夠更專注於業務邏輯和介面效果，而不是底層的實現細節。
  2. 模板語法：Vue基於標準HTML擴充了一套模板語法，使開發者能夠直接描述UI應該是什麼樣的，而不是如何構建它。這大大簡化了UI開發的複雜性，並提高了程式碼的可讀性和可維護性。
  3. 響應式資料繫結：Vue使用響應式資料繫結來自動更新UI，當資料發生變化時，Vue會自動檢測到這些變化並相應地更新檢視。這使得開發者無需手動編寫繁瑣的DOM更新程式碼，進一步簡化了開發過程。
  4. 元件化：Vue提供了元件化的開發方式，允許開發者將UI拆分成獨立的、可複用的元件。這些元件可以獨立開發、測試和維護，提高了程式碼的可重用性和可維護性。元件之間的通訊和資料流也可以透過宣告式的方式進行管理，進一步簡化了複雜應用的開發。

綜上所述，Vue透過其宣告式的程式設計模型、模板語法、響應式資料繫結和元件化特性，使開發者能夠更高效地構建使用者介面，並簡化了開發過程。因此，Vue被廣泛認為是一個強大的宣告式框架。

宣告式和命令式的區別：

  1. 命令式：早期進行前端開發，需要將獲取到的資料用字串拼接成需要的結果，然後插入到DOM中
  2. 宣告式：宣告式框架更注重結果，命令式的程式碼已經被封裝到了vue.js中，替換DOM的操作由vue來實現

三、MVVM模式

  1. MVC模式：後端開發使用的一種模式，包括模型（Model）、檢視（View）、控制器（Controller）。後端開發，一般分成三層架構，包括：表現層、業務層、持久層。表現層負責接收客戶端請求，並向客戶端響應結果；業務層負責處理複雜的業務邏輯；持久層負責資料的持久化，對資料庫表進行增刪改查。其中表現層採用了MVC模式，使用控制器（Controller）來接收請求，模型（Model）進行資料封裝，檢視（View）展示資料，檢視一般採用模板渲染引擎，比如：jsp、Thymeleaf等。

  2. 前端如何借鑑MVC模式：

    • 使用者和應用互動，控制器（Controller）的事件處理器被觸發
    • 控制器（Controller）從模型（Model）中請求資料，並返回給檢視（View）
    • 檢視（View）將資料渲染，並呈現給使用者

  3. 前端使用MVC模式的弊端：

    • 針對每一個互動邏輯，都需要對應的控制器（Controller）來處理，而且複雜的DOM操作邏輯都放在了控制器（Controller）

  4. MVVM模式：

    • 針對前端採用MVC模式的弊端，需要去遮蔽控制器（Controller）。MVVM模式就是用來簡化模型到檢視的對映關係，隱藏controller

    • 在MVVM模型中，View（檢視）和Model（資料模型）之間是沒有直接聯絡的，它們之間的同步工作是透過ViewModel（檢視模型）實現的，ViewModel透過雙向資料繫結將兩者聯絡起來。

      image-20240312185640531

  5. 由於Vue引入了$ref屬性，使得Model可以直接操作View，違反了MVVM模型中View和Model之間不應該直接通訊的原則， Vue並沒有完全遵循MVVM模型，但Vue的設計也受到了它的啟發

四、虛擬DOM

  1. 虛擬DOM就是一個用來描述真實DOM的物件，但比真實DOM要輕量

  2. 傳統更新頁面，需要將一個字串透過innerHTML插入到DOM節點中，這會導致節點全部重新渲染

  3. 使用虛擬DOM，可以透過diff演算法，比較新舊虛擬節點的變化，計算出最小的更新步驟，最後應用到真實DOM的更新上

  4. 虛擬DOM本質上是一個JS物件，與具體平臺無關，所以虛擬DOM支援跨平臺，可以輕鬆地適用於多種應用程式和網站。

  5. 在Vue中，虛擬DOM的生成是透過Vue的編譯器和渲染函式來實現的。當Vue例項被建立時，它的模板會被編譯成一個渲染函式。渲染函式是Vue的核心，接收一個createElement函式作為引數，這個函式用於建立虛擬DOM節點。當所有的模板元素都被轉換為虛擬DOM節點後，這些節點會組合成一個虛擬DOM樹。這個樹形結構反映了元件的UI結構。當元件的狀態發生變化時，Vue會重新執行渲染函式生成新的虛擬DOM樹，然後與舊的虛擬DOM樹進行差異比較（diff演算法）。找出最小的變更集，並應用到真實的DOM上，以更新UI。

    render: function (createElement) {  
  return createElement(  
    'div', // 標籤名  
    {  
      attrs: { id: 'foo' }, // 屬性  
    },  
    [createElement('span', 'Hello')] // 子節點  
  )  
}

五、元件化

  1. 提高開發效率：透過複用已有的元件，避免了重複的程式碼編寫，從而提高了開發效率。
  2. 提高程式碼質量：元件的獨立性和模組化降低了程式碼之間的耦合度，使得程式碼更加清晰和可維護。
  3. 增強可擴充套件：透過將應用拆分為多個元件，可以獨立地對某個元件進行升級和擴充套件，而不會影響到其他部分的程式碼。
  4. 降低維護難度：只需要更新一個元件，就可以對使用元件的頁面都進行更新

六、SPA

  1. SPA：SPA在初始時只載入一個HTML頁面，之後的所有頁面切換和內容更新都是透過客戶端的JavaScript動態實現的，無需每次頁面切換時重新載入整個頁面。由於SPA無需在每次頁面切換時重新載入整個頁面，因此可以實現更流暢的使用者互動和動態更新，減少了頁面載入和切換時的延遲。但由於SPA的頁面結構是動態載入的，不利於網路爬蟲進行抓取，所以無法實現SEO。
  2. MPA：每次使用者導航到新的頁面時，都需要重新載入整個HTML頁面，包括該頁面所需的指令碼和樣式。由於頁面包含靜態結構，網路爬蟲可以抓取到頁面內容，所以SEO很好。
  3. 如何解決SPA的SEO問題：
    • 服務端渲染（SSR）: 在服務端完成頁面的渲染，直接輸出完整的HTML
    • 預渲染（SSG）：對於某些不經常變動的頁面，可以使用預渲染技術生成靜態的HTML檔案
    • 動態渲染：根據請求的來源（使用者或搜尋引擎爬蟲）來動態地決定返回哪種型別的頁面。對於使用者，返回SPA頁面；對於爬蟲，返回經過服務端渲染的HTML頁面。
    • 後設資料最佳化：確保每個頁面都有適當的標題（title）、描述（description）和關鍵字（keywords）等後設資料，以便搜尋引擎更好地理解和展示頁面內容
    • 跟蹤和分析：使用Google Analytics等工具跟蹤和分析SPA的SEO效果，以便及時發現問題並進行最佳化

相關文章