1. 對Vue的理解

平平丶淡淡發表於2024-03-13
Vue

一、為什麼說Vue是漸進式框架

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

二、宣告式框架

宣告式框架允許開發者專注於業務邏輯或UI的組織，而不是底層的實現細節。

命令式：需要將獲取到的資料透過字串拼接成需要的結果，然後插入到DOM中，實現DOM的更新。每一步都需要開發者去處理。

宣告式：宣告式框架更注重結果，對DOM的操作被隱藏在框架內部，不需要開發者去操作DOM，開發者只需要關注業務邏輯的處理即可。

三、MVVM

  1. MVC模式

    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透過雙向資料繫結將兩者聯絡起來

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

      image-20240312185640531

四、虛擬DOM

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

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

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

  4. 在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')] // 子節點  
  )  
}

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

五、元件化

  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效果，以便及時發現問題並進行最佳化

相關文章