Vue 3深度探索：自定義渲染器與服務端渲染

来源:https://www.cnblogs.com/Amd794/p/18247672
-Advertisement-
Play Games

這篇文章介紹瞭如何在Vue框架中實現自定義渲染器以增強組件功能，探討了虛擬DOM的工作原理，以及如何通過SSR和服務端預取數據優化首屏載入速度。同時，講解了同構應用的開發方式與狀態管理技巧，助力構建高性能前端應用。 ...


title: Vue 3深度探索：自定義渲染器與服務端渲染
date: 2024/6/14
updated: 2024/6/14
author: cmdragon

excerpt:
這篇文章介紹瞭如何在Vue框架中實現自定義渲染器以增強組件功能，探討了虛擬DOM的工作原理，以及如何通過SSR和服務端預取數據優化首屏載入速度。同時，講解了同構應用的開發方式與狀態管理技巧，助力構建高性能前端應用。

categories:

  • 前端開發

tags:

  • 自定義渲染
  • 虛擬DOM
  • Vue框架
  • SSR服務端渲染
  • 同構應用
  • 數據預取
  • 狀態管理

image

image

掃碼關註或者微信搜一搜：編程智域 前端至全棧交流與成長

Vue 3基礎回顧

Vue 3簡介

Vue.js是一個漸進式JavaScript框架，用於構建用戶界面。Vue 3是Vue.js的第三個主要版本，它在2020年發佈，帶來了許多新特性和改進，旨在提高性能、可維護性和可擴展性。

Vue 3的新特性

  1. 組合式API：Vue 3引入了組合式API，允許開發者以函數式的方式組織組件邏輯，提高了代碼的可重用性和可維護性。
  2. 性能提升：Vue 3通過使用Proxy代替Object.defineProperty來實現響應式系統，提高了數據變更的檢測效率，從而提升了性能。
  3. Tree-shaking支持：Vue 3支持Tree-shaking，這意味著最終打包的應用只包含實際使用的功能，減少了應用體積。
  4. 更好的TypeScript支持：Vue 3提供了更好的TypeScript支持，使得類型推斷和代碼提示更加準確。
  5. 自定義渲染器：Vue 3允許開發者創建自定義渲染器，使得Vue可以在不同的平臺和環境中運行，如WebGL或Node.js。

響應式系統的改進

Vue 3的響應式系統基於Proxy對象，它能夠攔截對象屬性的讀取和設置操作，從而實現更加高效和精確的依賴跟蹤。與Vue 2相比，Vue
3的響應式系統在初始化和更新時更加高效，減少了不必要的性能開銷。

Vue 3的核心概念

  1. 組合式API：通過setup函數，開發者可以定義組件的響應式狀態和邏輯，並使用Composition API提供的函數來組織代碼。
  2. 響應式數據與副作用：Vue 3使用Proxy來創建響應式對象，當這些對象的屬性被訪問或修改時，Vue會自動追蹤依賴，併在數據變化時觸發相應的副作用。
  3. 生命周期鉤子：Vue 3保留了Vue 2的生命周期鉤子，並允許在setup函數中訪問它們，以便在組件的不同階段執行特定的邏輯。

探索Vue 3渲染機制

Vue 3的渲染流程

Vue 3的渲染流程主要包括以下幾個步驟：

  1. 初始化：創建Vue實例時，會進行初始化操作，包括設置響應式數據、註冊組件、掛載DOM等。
  2. 模板編譯：如果使用模板語法，Vue會將其編譯成渲染函數。
  3. 虛擬DOM：根據渲染函數生成虛擬DOM。
  4. 渲染：將虛擬DOM渲染到真實的DOM中。
  5. 更新：當數據變化時，Vue會重新生成虛擬DOM，並與上一次的虛擬DOM進行對比，計算出實際需要變更的最小操作，然後更新DOM。

模板編譯

cmdragon's Blog
Vue 3的模板編譯器負責將模板字元串轉換為渲染函數。這個過程包括解析模板、優化靜態節點、生成代碼等步驟。
以下是Vue 3模板編譯器的主要步驟：

1. 解析（Parsing）

解析階段將模板字元串轉換為抽象語法樹（AST）。AST是一個對象樹，它精確地表示了模板的結構，包括標簽、屬性、文本節點等。Vue
3使用了一個基於HTML解析器的自定義解析器，它能夠處理模板中的各種語法，如插值、指令、事件綁定等。

2. 優化（Optimization）

優化階段遍歷AST，並標記出其中的靜態節點和靜態根節點。靜態節點是指那些在渲染過程中不會發生變化的節點，如純文本節點。靜態根節點是指包含至少一個靜態子節點且自身不是靜態節點的節點。標記靜態節點和靜態根節點可以避免在後續的更新過程中對它們進行不必要的重新渲染。

3. 代碼生成（Code Generation）

代碼生成階段將優化後的AST轉換為渲染函數。這個渲染函數是一個JavaScript函數，它使用Vue的虛擬DOM庫來創建虛擬節點。渲染函數通常會使用with
語句來簡化對組件實例數據的訪問。代碼生成器會生成一個渲染函數的字元串表示，然後通過new Function或Function
構造函數將其轉換為可執行的函數。

示例代碼

以下是一個簡化的模板編譯過程示例：

const template = `<div>Hello, {{ name }}</div>`;

// 解析
const ast = parse(template);

// 優化
optimize(ast);

// 代碼生成
const code = generate(ast);

// 創建渲染函數
const render = new Function(code);

// 使用渲染函數
const vnode = render({ name: 'Vue' });

在這個示例中，我們首先解析模板字元串以創建AST，然後優化AST，最後生成渲染函數的代碼。生成的代碼被轉換為一個渲染函數，該函數接受一個包含組件數據的對象，並返回一個虛擬節點。

虛擬DOM

虛擬DOM（Virtual DOM）是現代前端框架中常用的技術，Vue.js
也是其中之一。虛擬DOM的核心思想是使用JavaScript對象來模擬DOM結構，並通過對比新舊虛擬DOM的差異來最小化對真實DOM的操作，從而提高性能。

虛擬DOM的優勢
  1. 性能優化：通過比較新舊虛擬DOM的差異，只對必要的DOM進行更新，減少不必要的DOM操作，從而提高性能。
  2. 跨平臺：虛擬DOM可以在不同的平臺上運行，因為它不依賴於特定的DOM API。
  3. 開發效率：開發者可以更專註於業務邏輯，而不必擔心DOM操作的細節。
虛擬DOM的工作原理
  1. 創建虛擬DOM：當組件渲染時，Vue會根據模板和數據創建一個虛擬DOM對象。
  2. 比較新舊虛擬DOM：當數據發生變化時，Vue會重新渲染組件，並創建一個新的虛擬DOM對象。然後，Vue會對比新舊虛擬DOM的差異。
  3. 更新真實DOM：根據新舊虛擬DOM的差異，Vue會計算出最小化的DOM操作，並應用到真實DOM上。
示例代碼

以下是一個簡化的虛擬DOM更新過程的示例：

// 假設有一個虛擬DOM對象
const oldVnode = {
  tag: 'div',
  children: [
    { tag: 'span', text: 'Hello' }
  ]
};

// 假設數據發生變化，需要更新虛擬DOM
const newVnode = {
  tag: 'div',
  children: [
    { tag: 'span', text: 'Hello, Vue!' }
  ]
};

// 比較新舊虛擬DOM的差異，並更新真實DOM
patch(oldVnode, newVnode);

在這個示例中，我們首先創建了一個舊的虛擬DOM對象，然後創建了一個新的虛擬DOM對象。接著，我們調用patch
函數來比較新舊虛擬DOM的差異，並更新真實DOM。

渲染函數

渲染函數（Render Function）是Vue.js中用於創建虛擬DOM的一種方式，它是Vue組件的核心。渲染函數允許開發者以編程的方式直接操作虛擬DOM，從而提供更高的靈活性和控制力。

渲染函數的基本概念

渲染函數是一個函數，它接收一個createElement函數作為參數，並返回一個虛擬DOM節點（VNode）。createElement
函數用於創建虛擬DOM節點，它接受三個參數：

  1. tag：字元串或組件，表示節點的標簽或組件。
  2. data：對象，包含節點的屬性、樣式、類名等。
  3. children：數組，包含子節點。
渲染函數的示例

以下是一個簡單的Vue組件，它使用渲染函數來創建一個包含文本的div元素：

Vue.component('my-component', {
  render(createElement) {
    return createElement('div', 'Hello, Vue!');
  }
});

在這個示例中，render函數接收createElement作為參數，並返回一個虛擬DOM節點。這個節點是一個div
元素，包含文本Hello, Vue!。

渲染函數與模板語法的區別

Vue提供了兩種方式來定義組件的渲染邏輯：渲染函數和模板語法。模板語法更加簡潔和易於理解，而渲染函數提供了更高的靈活性和控制力。

  1. 模板語法：開發者可以使用HTML-like的模板來定義組件的渲染邏輯，Vue會將其編譯成渲染函數。
  2. 渲染函數：開發者可以直接編寫渲染函數來定義組件的渲染邏輯，從而提供更高的靈活性和控制力。
渲染函數的優勢
  1. 靈活性：渲染函數允許開發者以編程的方式直接操作虛擬DOM，從而提供更高的靈活性和控制力。
  2. 性能優化：渲染函數可以更精確地控制虛擬DOM的創建和更新，從而提高性能。
  3. 跨平臺：渲染函數可以在不同的平臺上運行，因為它不依賴於特定的DOM API。

自定義渲染器基礎

Vue 3允許開發者創建自定義渲染器，以便在不同的平臺和環境中運行Vue。自定義渲染器需要實現一些基本的API，如創建元素、設置屬性、掛載子節點等。

渲染器架構

Vue 3的渲染器架構包括以下幾個部分：

  1. 渲染器實例：負責管理渲染過程，包括創建元素、設置屬性、掛載子節點等。
  2. 渲染器API：提供了一系列的API，用於創建自定義渲染器。
  3. 渲染器插件：允許開發者擴展渲染器的功能。
渲染器API

Vue 3提供了以下渲染器API：

  1. render：渲染函數，負責生成虛擬DOM。
  2. createRenderer：創建自定義渲染器的函數。
  3. createElement：創建虛擬DOM元素的函數。
  4. patch：更新虛擬DOM的函數。
  5. unmount：卸載虛擬DOM的函數。
示例：創建一個簡單的自定義渲染器

以下是一個簡單的自定義渲染器的示例代碼：

import {createRenderer} from 'vue';

const renderer = createRenderer({
    createElement(tag) {
        return document.createElement(tag);
    },
    setElementText(el, text) {
        el.textContent = text;
    },
    patchProp(el, key, prevValue, nextValue) {
        if (key === 'textContent') {
            el.textContent = nextValue;
        } else {
            el.setAttribute(key, nextValue);
        }
    },
    insert(el, parent, anchor = null) {
        parent.insertBefore(el, anchor);
    },
    createText(text) {
        return document.createTextNode(text);
    },
    setText(el, text) {
        el.nodeValue = text;
    },
    createComment(text) {
        return document.createComment(text);
    },
    setComment(el, text) {
        el.nodeValue = text;
    },
    parentNode(node) {
        return node.parentNode;
    },
    nextSibling(node) {
        return node.nextSibling;
    },
    remove(node) {
        const parent = node.parentNode;
        if (parent) {
            parent.removeChild(node);
        }
    }
});

export function render(vnode, container) {
    renderer.render(vnode, container);
}

通過這個示例，我們可以看到如何使用Vue 3的渲染器API來創建一個簡單的自定義渲染器。這個渲染器可以在不同的平臺和環境中運行Vue，例如在Node.js中渲染Vue組件。

構建高級自定義渲染器

在Vue 3中，構建一個高級自定義渲染器涉及到實現一系列核心API，如createElement、patchProp、insert、remove
等。以下是詳細的步驟和代碼示例。

1. 實現 createElement

createElement函數負責創建新的DOM元素或組件實例。在Web環境中，這通常意味著創建一個HTML元素。

function createElement(type, isSVG, vnode) {
  const element = isSVG
    ? document.createElementNS('http://www.w3.org/2000/svg', type)
    : document.createElement(type);
  return element;
}

2. 實現 patchProp

patchProp函數用於更新元素的屬性。這包括設置屬性值、綁定事件監聽器等。

function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    el.className = nextValue || '';
  } else if (key === 'style') {
    if (nextValue) {
      for (let style in nextValue) {
        el.style[style] = nextValue[style];
      }
    }
  } else if (/^on[^a-z]/.test(key)) {
    const event = key.slice(2).toLowerCase();
    if (prevValue) {
      el.removeEventListener(event, prevValue);
    }
    if (nextValue) {
      el.addEventListener(event, nextValue);
    }
  } else {
    if (nextValue === null || nextValue === false) {
      el.removeAttribute(key);
    } else {
      el.setAttribute(key, nextValue);
    }
  }
}

3. 實現 insert

insert函數用於將元素插入到DOM中的指定位置。

function insert(el, parent, anchor = null) {
  parent.insertBefore(el, anchor);
}

4. 實現 remove

remove函數用於從DOM中移除元素。

function remove(el) {
  const parent = el.parentNode;
  if (parent) {
    parent.removeChild(el);
  }
}

5. 實現 createText 和 setText

這兩個函數用於處理文本節點。

function createText(text) {
  return document.createTextNode(text);
}

function setText(el, text) {
  el.nodeValue = text;
}

6. 實現 render 函數

render函數是Vue組件的核心渲染函數，它使用上述API來渲染組件。

function render(vnode, container) {
  if (vnode) {
    patch(container._vnode || null, vnode, container);
  } else {
    if (container._vnode) {
      unmount(container._vnode);
    }
  }
  container._vnode = vnode;
}

function patch(n1, n2, container, anchor = null) {
  if (n1 && n1.type !== n2.type) {
    unmount(n1);
    n1 = null;
  }

  const { type } = n2;
  if (typeof type === 'string') {
    if (!n1) {
      mountElement(n2, container, anchor);
    } else {
      patchElement(n1, n2);
    }
  } else if (type === Text) {
    if (!n1) {
      const el = (n2.el = createText(n2.children));
      insert(el, container);
    } else {
      const el = (n2.el = n1.el);
      if (n2.children !== n1.children) {
        setText(el, n2.children);
      }
    }
  }
}

function mountElement(vnode, container, anchor) {
  const el = (vnode.el = createElement(vnode.type, vnode.props.isSVG));
  for (const key in vnode.props) {
    if (key !== 'children') {
      patchProp(el, key, null, vnode.props[key]);
    }
  }
  if (typeof vnode.children === 'string') {
    setText(el, vnode.children);
  } else if (Array.isArray(vnode.children)) {
    vnode.children.forEach(child => {
      patch(null, child, el);
    });
  }
  insert(el, container, anchor);
}

function patchElement(n1, n2) {
  const el = (n2.el = n1.el);
  const oldProps = n1.props;
  const newProps = n2.props;

  for (const key in newProps) {
    if (newProps[key] !== oldProps[key]) {
      patchProp(el, key, oldProps[key], newProps[key]);
    }
  }
  for (const key in oldProps) {
    if (!(key in newProps)) {
      patchProp(el, key, oldProps[key], null);
    }
  }

  patchChildren(n1, n2, el);
}

function patchChildren(n1, n2, container) {
  if (typeof n2.children === 'string') {
    if (Array.isArray(n1.children)) {
      n1.children.forEach(c => unmount(c));
    }
    setText(container, n2.children);
  } else if (Array.isArray(n2.children)) {
    if (Array.isArray(n1.children)) {
      // diff演算法實現
    } else {
      setText(container, '');
      n2.children.forEach(c => patch(null, c, container));
    }
  }
}

function unmount(vnode) {
  if (vnode.type === Text) {
    const el = vnode.el;
    remove(el);
  } else {
    removeChildren(vnode);
  }
}

function removeChildren(vnode) {
  const el = vnode.el;
  for (let i = 0; i < el.childNodes.length; i++) {
    unmount(vnode.children[i]);
  }
}

7. 處理事件和屬性

在自定義渲染器中，我們需要處理元素的事件監聽和屬性更新。這通常涉及到添加和移除事件監聽器，以及更新元素的屬性。

function patchProp(el, key, prevValue, nextValue) {
  if (key === 'class') {
    el.className = nextValue || '';
  } else if (key === 'style') {
    if (nextValue) {
      for (let style in nextValue) {
        el.style[style] = nextValue[style];
      }
    } else {
      el.removeAttribute('style');
    }
  } else if (/^on[^a-z]/.test(key)) {
    const event = key.slice(2).toLowerCase();
    if (prevValue) {
      el.removeEventListener(event, prevValue);
    }
    if (nextValue) {
      el.addEventListener(event, nextValue);
    }
  } else {
    if (nextValue === null || nextValue === false) {
      el.removeAttribute(key);
    } else {
      el.setAttribute(key, nextValue);
    }
  }
}

8. 自定義指令

自定義指令允許我們擴展Vue的功能，使其能夠處理特定的DOM操作。在自定義渲染器中，我們需要在元素上註冊和調用這些指令。

function mountElement(vnode, container, anchor) {
  const el = (vnode.el = createElement(vnode.type, vnode.props.isSVG));
  for (const key in vnode.props) {
    if (key !== 'children' && !/^on[^a-z]/.test(key)) {
      patchProp(el, key, null, vnode.props[key]);
    }
  }
  // 處理自定義指令
  for (const key in vnode.props) {
    if (key.startsWith('v-')) {
      const directive = vnode.props[key];
      if (typeof directive === 'function') {
        directive(el, vnode);
      }
    }
  }
  // ... 其他代碼
}

9. 插槽和組件渲染

插槽允許我們封裝可重用的模板，而組件渲染則涉及到遞歸地渲染組件樹。在自定義渲染器中，我們需要處理這些情況。

function patchElement(n1, n2) {
  const el = (n2.el = n1.el);
  // ... 屬性更新代碼
  if (typeof n2.children === 'function') {
    // 處理插槽
    const slotContent = n2.children();
    patchChildren(n1, slotContent, el);
  } else {
    // ... 其他代碼
  }
}

function mountComponent(vnode, container, anchor) {
  const component = {
    vnode,
    render: () => {
      const subtree = renderComponent(vnode);
      patch(null, subtree, container, anchor);
    }
  };
  vnode.component = component;
  component.render();
}

function renderComponent(vnode) {
  const { render } = vnode.type;
  const subtree = render(vnode.props);
  return subtree;
}

總結

通過實現上述API，我們構建了一個基本的自定義渲染器。這個渲染器可以處理基本的DOM操作，如創建元素、更新屬性、插入和移除元素。為了構建一個完整的高級自定義渲染器，還需要實現更複雜的邏輯，如處理組件的生命周期、狀態管理、非同步渲染等。這些高級特性需要深入理解Vue的內部機制和渲染流程。

虛擬DOM的優化策略

  1. 批量更新（Batch Updates） ： 將多個更新操作合併成一個，減少重渲染的次數。Vue通過響應式系統自動進行批量更新，但在自定義渲染器中，我們需要手動實現這一機制。
  2. 列表重用（List Reuse） ： 當列表項發生變化時，儘可能重用已有的DOM節點，而不是銷毀並重新創建。這可以通過key屬性來實現，確保每個節點都有唯一的標識。
  3. 最小化DOM操作： 在更新虛擬DOM樹時，儘量減少實際的DOM操作。例如，使用CSS類名切換來改變樣式，而不是直接操作內聯樣式。
  4. 避免不必要的渲染： 使用shouldComponentUpdate或React.memo
    （在React中）來避免不必要的組件渲染。在Vue中，可以使用v-once指令來標記靜態內容，使其只渲染一次。

渲染器的性能考量

  1. 快速路徑（Fast Path） ： 對於簡單的更新，如文本節點的替換，渲染器應該有一條快速路徑，避免複雜的diff演算法。
  2. 高效的diff演算法： 渲染器應該實現高效的diff演算法，如React的Fiber架構，它允許增量渲染和優先順序調度。
  3. 非同步渲染（Async Rendering） ：
    將渲染任務分解成小塊，併在空閑時間執行，以避免阻塞主線程。這可以通過requestIdleCallback或requestAnimationFrame來實現。
  4. 記憶體管理： 渲染器應該有效地管理記憶體，避免記憶體泄漏。例如，及時清理不再使用的虛擬DOM節點和相關數據。
  5. 優化事件處理： 使用事件委托來減少事件監聽器的數量，或者使用passive: true來優化滾動事件的性能。

示例代碼

以下是一個簡化的批量更新示例，展示瞭如何在自定義渲染器中實現性能優化：

let isBatchingUpdate = false;

function queueUpdate(fn) {
  if (!isBatchingUpdate) {
    fn();
  } else {
    pendingUpdates.push(fn);
  }
}

function startBatch() {
  isBatchingUpdate = true;
}

function endBatch() {
  isBatchingUpdate = false;
  while (pendingUpdates.length) {
    const fn = pendingUpdates.shift();
    fn();
  }
}

// 使用示例
startBatch();
updateComponent1();
updateComponent2();
endBatch();

在這個示例中，我們通過startBatch和endBatch來控制批量更新，確保多個更新操作在一次重渲染中完成。

SSR概述

服務端渲染（Server-Side
Rendering，SSR）是一種在伺服器上生成HTML內容的技術。當用戶請求一個頁面時，伺服器會生成完整的HTML頁面，並將其發送到用戶的瀏覽器。用戶瀏覽器接收到HTML頁面後，可以直接顯示頁面內容，而不需要等待JavaScript執行完成。SSR的主要目的是提高首屏載入速度，改善SEO（搜索引擎優化），以及提供更好的用戶體驗。

SSR的優勢與挑戰

優勢：

  1. 首屏載入速度快：伺服器直接發送完整的HTML頁面，減少了客戶端的渲染時間。
  2. SEO友好：搜索引擎可以直接抓取到完整的頁面內容，有利於SEO。
  3. 用戶體驗：對於網路環境較差的用戶，可以更快地看到頁面內容。

挑戰：

  1. 開發複雜度增加：需要考慮伺服器和客戶端的代碼共用和狀態同步。
  2. 伺服器壓力：伺服器需要處理更多的渲染邏輯，可能會增加伺服器的負載。
  3. 緩存策略：需要設計合理的緩存策略來提高性能。

同構應用

同構應用是指既可以在伺服器上運行，也可以在客戶端運行的JavaScript應用。同構應用結合了服務端渲染和客戶端渲染的優勢，可以在伺服器上生成HTML內容，同時在客戶端進行交互。

同構應用的關鍵特性包括：

  • 代碼共用：伺服器和客戶端使用相同的JavaScript代碼。
  • 狀態同步：伺服器和客戶端需要同步應用的狀態。
  • 路由處理：伺服器和客戶端需要處理路由，確保頁面正確渲染。

同構應用的優勢：

  • 開發效率高：可以復用代碼，減少開發工作量。
  • 性能優化：可以根據不同的環境進行優化。
  • 用戶體驗好：可以提供快速的首屏載入和流暢的交互體驗。

同構應用的挑戰：

  • 開發複雜度增加：需要考慮伺服器和客戶端的代碼共用和狀態同步。
  • 伺服器壓力：伺服器需要處理更多的渲染邏輯，可能會增加伺服器的負載。
  • 緩存策略：需要設計合理的緩存策略來提高性能。

構建SSR應用

配置Vue SSR（服務端渲染）通常涉及以下幾個關鍵步驟：

  1. 項目設置：

    • 使用Vue CLI創建一個新項目，或者將現有的Vue項目轉換為支持SSR。
    • 安裝必要的SSR依賴，如vue-server-renderer。

  2. 伺服器端入口：

    • 創建一個伺服器端入口文件，如entry-server.js，用於創建Vue實例並渲染為字元串。

  3. 客戶端入口：

    • 創建一個客戶端入口文件，如entry-client.js，用於在客戶端激活伺服器端渲染的Vue實例。

  4. 伺服器配置：

    • 設置Node.js伺服器，如使用Express，來處理HTTP請求並調用Vue的渲染器。

  5. 渲染器創建：

    • 使用vue-server-renderer的createRenderer方法創建一個渲染器實例。

  6. 渲染邏輯：

    • 在伺服器端，使用渲染器將Vue實例渲染為HTML字元串，並將其發送給客戶端。
    • 在客戶端，使用渲染器激活伺服器端渲染的Vue實例，使其能夠響應交互。

  7. 數據預取：

    • 在伺服器端渲染之前，使用serverPrefetch鉤子或其他方法預取所需的數據。

  8. 狀態管理：

    • 使用Vuex等狀態管理庫，確保伺服器和客戶端狀態的一致性。

  9. 錯誤處理：

    • 在伺服器端渲染過程中，捕獲並處理可能出現的錯誤。

  10. 日誌記錄：

    • 記錄伺服器渲染過程中的關鍵信息，以便於調試和監控。

  11. 構建和部署：

    • 配置webpack等構建工具，確保伺服器端和客戶端代碼能夠正確打包。
    • 部署應用，確保伺服器配置正確，能夠處理SSR請求。

以下是一個簡化的Vue SSR配置示例：

// entry-server.js
import { createApp } from './app';

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp();

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      resolve(app);
    }, reject);
  });
};

// entry-client.js
import { createApp } from './app';

const { app, router, store } = createApp();

router.onReady(() => {
  app.$mount('#app');
});

// server.js (使用Express)
const Vue = require('vue');
const express = require('express');
const renderer = require('vue-server-renderer').createRenderer();
const server = express();

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>訪問的 URL 是： {{ url }}</div>`
  });

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

server.listen(8080);

這個示例展示瞭如何使用Vue和Express來創建一個簡單的SSR應用。在實際項目中，配置會更加複雜，需要考慮路由、狀態管理、數據預取、錯誤處理等多個方面。

數據預取與狀態管理

在Vue SSR（服務端渲染）中，數據預取和狀態管理是確保應用能夠正確渲染並保持客戶端和伺服器端狀態一致性的關鍵步驟。以下是這兩個方面的詳細解釋和實現方法：

數據預取

數據預取是指在伺服器端渲染之前獲取所需數據的過程。這通常涉及到API調用或資料庫查詢。數據預取的目的是確保在渲染Vue組件時，所有必要的數據都已經準備好，從而避免在客戶端進行額外的數據請求。

在Vue中，數據預取通常在組件的asyncData方法中完成。這個方法在伺服器端渲染期間被調用，並且其返回的Promise會被解析，以便在渲染組件之前獲取數據。

export default {
  // ...
  async asyncData({ store, route }) {
    // 獲取數據
    const data = await fetchDataFromAPI(route.params.id);
    // 將數據存儲到Vuex store中
    store.commit('setData', data);
  }
  // ...
};

在上面的代碼中，asyncData方法接收一個包含store和route的對象作為參數。fetchDataFromAPI
是一個非同步函數，用於從API獲取數據。獲取的數據通過Vuex的commit方法存儲到全局狀態管理中。

狀態管理

在Vue SSR中，狀態管理通常使用Vuex來實現。Vuex是一個專為Vue.js應用程式開發的狀態管理模式和庫。在伺服器端渲染中，確保客戶端和伺服器端的狀態一致性非常重要。

為了實現這一點，需要在伺服器端渲染期間創建Vuex store實例，併在渲染完成後將狀態序列化，以便在客戶端激活時恢復狀態。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export function createStore() {
  return new Vuex.Store({
    state: {
      // 初始狀態
    },
    mutations: {
      // 更新狀態的邏輯
    },
    actions: {
      // 非同步操作
    }
  });
}

// entry-server.js
import { createApp } from './app';
import { createStore } from './store';

export default context => {
  return new Promise((resolve, reject) => {
    const store = createStore();
    const { app, router } = createApp({ store });

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }
      // 預取數據
      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({
            store,
            route: router.currentRoute
          });
        }
      })).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};

在上面的代碼中，createStore函數用於創建Vuex store實例。在entry-server.js
中，我們創建store實例，併在路由準備好後調用組件的asyncData方法來預取數據。預取完成後，我們將store的狀態序列化到上下文對象中，以便在客戶端恢復狀態。

在客戶端，我們需要在激活應用之前恢復狀態：

// entry-client.js
import { createApp } from './app';
import { createStore } from './store';

const { app, router, store } = createApp();

if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

router.onReady(() => {
  app.$mount('#app');
});

在客戶端，我們通過檢查window.__INITIAL_STATE__來獲取伺服器端序列化的狀態，併在創建store實例後使用replaceState
方法恢復狀態。這樣，客戶端和伺服器端的狀態就保持了一致性。

錯誤處理與日誌記錄

在Vue SSR（服務端渲染）中，錯誤處理和日誌記錄是確保應用穩定性和可維護性的重要組成部分。以下是如何在Vue
SSR應用中實現錯誤處理和日誌記錄的詳細說明：

錯誤處理

錯誤處理在Vue SSR中主要涉及兩個方面：捕獲和處理在伺服器端渲染期間發生的錯誤，以及在客戶端激活期間處理錯誤。

伺服器端錯誤處理

在伺服器端，錯誤通常在渲染過程中被捕獲。這可以通過在創建應用實例時使用一個錯誤處理函數來實現。

// entry-server.js
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp(context);

    router.push(context.url);

    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents();
      if (!matchedComponents.length) {
        return reject({ code: 404 });
      }

      Promise.all(matchedComponents.map(component => {
        if (component.asyncData) {
          return component.asyncData({ store, route: router.currentRoute });
        }
      })).then(() => {
        context.state = store.state;
        resolve(app);
      }).catch(reject);
    }, reject);
  });
};

在上面的代碼中，我們使用Promise和reject函數來捕獲和處理錯誤。如果在預取數據或渲染組件時發生錯誤，reject
函數會被調用，並將錯誤傳遞給調用者。

客戶端錯誤處理

在客戶端，錯誤處理通常通過Vue的錯誤捕獲鉤子來實現。

// main.js
new Vue({
  // ...
  errorCaptured(err, vm, info) {
    // 記錄錯誤信息
    logError(err, info);
    // 可以在這裡添加更多的錯誤處理邏輯
    return false;
  },
  // ...
}).$mount('#app');

在errorCaptured鉤子中，我們可以記錄錯誤信息並執行其他必要的錯誤處理邏輯。

日誌記錄

日誌記錄是跟蹤應用行為和診斷問題的重要手段。在Vue SSR中，日誌記錄可以通過集成的日誌庫或自定義日誌記錄函數來實現。

伺服器端日誌記錄

在伺服器端，日誌記錄通常在應用的入口文件中實現。

// entry-server.js
import logger from './logger'; // 假設有一個日誌記錄器

export default context => {
  return new Promise((resolve, reject) => {
    logger.info('Starting server-side rendering');

    // ... 渲染邏輯 ...

    router.onReady(() => {
      // ...
      Promise.all(matchedComponents.map(component => {
        // ...
      })).then(() => {
        // ...
        logger.info('Server-side rendering completed');
      }).catch(err => {
        logger.error('Error during server-side rendering', err);
        reject(err);
      });
    }, reject);
  });
};

在上面的代碼中，我們使用logger對象來記錄伺服器端渲染的開始和結束，以及在發生錯誤時記錄錯誤信息。

客戶端日誌記錄

在客戶端，日誌記錄可以在Vue實例的created或mounted生命周期鉤子中實現。

// main.js
new Vue({
  // ...
  created() {
    logger.info('Client-side app initialized');
  },
  // ...
}).$mount('#app');

在created鉤子中，我們記錄客戶端應用初始化的信息。

通過上述方法，我們可以在Vue SSR應用中有效地實現錯誤處理和日誌記錄，從而提高應用的穩定性和可維護性。

附錄：擴展閱讀與資源

推薦書籍與線上資源

  1. 書籍

    • 《Vue.js 實戰》 ：這本書詳細介紹了 Vue.js 的核心概念和實際應用，適合想要深入瞭解 Vue.js 的開發者。
    • 《深入淺出 Nuxt.js》 ：專門針對 Nuxt.js 的書籍，涵蓋了從基礎到高級的 Nuxt.js 開發技巧。

  2. 線上資源

社區與論壇

AD：覆蓋廣泛主題工具可供使用

  1. GitHub

  2. Stack Overflow

    • 在Stack Overflow上搜索 Nuxt.js 或 Vue.js 相關的問題，通常能找到解決方案或討論。

  3. Reddit

  4. Discord 和 Slack

    • Nuxt.js Discord 伺服器：加入 Nuxt.js 的 Discord 社區，可以實時與其他開發者交流。
    • Vue.js Slack 社區：加入 Vue.js 的 Slack 社區，參與更廣泛的 Vue.js 生態系統討論。

  5. Twitter

    • 關註@nuxt_js和@vuejs的 Twitter 賬號，獲取最新的更新和新聞。

  6. Medium

    • 在 Medium 上搜索 Nuxt.js 或 Vue.js，可以找到許多開發者分享的經驗和教程。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一行代碼實現滑鼠橫向滾動
    ‍ 寫在開頭 點贊 + 收藏 學會 在項目中我們可能會遇到當滑鼠在某個區域內，我們希望滾動滑鼠裡面的內容可以橫向滾動； 比如我們一些常見的後臺狀態欄： 那這種該怎麼寫？請看慄子 代碼如下： <template> <div> <div class="top"> <div class ...
  • 安裝 Nuxt.js 的步驟和註意事項
    摘要：本文闡述了Nuxt.js作為基於Vue.js的伺服器端渲染框架，其在提升Web開發效率、確保代碼質量和優化應用性能方面的核心價值。通過詳盡的安裝步驟、配置說明、常見問題解決策略及進階部署方法，為開發者搭建和部署Nuxt.js項目提供了全方位指導。 ...
  • [JS] 動態執行JS與修改詞法作用域
    JS中有一些操作可以動態地執行JS代碼，並修改或新建詞法作用域，這種操作雖然帶來了更多的靈活性，但是會嚴重地影響到性能。 ...
  • 高級前端開發需要知道的 25 個 JavaScript 單行代碼
    1. 不使用臨時變數來交換變數的值 2. 對象解構，讓數據訪問更便捷 3. 淺克隆對象 4. 合併對象 5. 清理數組 6. 將 NodeList 轉換為數組 7. 檢查數組是否滿足指定條件 8. 將文本複製到剪貼板 9. 刪除數組重覆項 10. 取兩個數組的交集 11. 求數組元素的總和 12. ... ...
  • 探索Web Components
    這篇文章介紹了Web Components技術，它允許開發者創建可復用、封裝良好的自定義HTML元素，並直接在瀏覽器中運行，無需依賴外部庫。通過組合HTML模板、Shadow DOM、自定義元素和HTML imports，Web Components增強了原生DOM的功能，提高了組件化開發的封裝性和... ...
  • 隨便寫的小網頁練習
    隨便寫的小網頁練習： 原視頻:十分鐘學會寫網頁【編程前端入門】 簡介： 本期重做了好幾遍，是全新的視角和概念，從瀏覽器底層渲染原理到實現網站的演示，一節課講透，必看的一期。後面不管是寫小程式還是App，都會用到這一期的概念。 這一期內容是我做完第一章個人網站後更新的，用來替代原先沒做好的第三節， ...
  • Vue微前端架構與Qiankun實踐理論指南
    這篇文章介紹了微前端架構概念，聚焦於如何在Vue.js項目中應用Qiankun框架實現模塊化和組件化，以達到高效開發和維護的目的。討論了Qiankun的原理、如何設置主應用與子應用的通信，以及如何解決跨域問題和優化集成過程，從而實現前端應用的靈活擴展與組織。 ...
  • 記錄--N 個值得一看的前端代碼片段
    ‍ 寫在開頭 點贊 + 收藏 學會 在日常的開發過程中，我們都會有一些常用的代碼片段，這些代碼片段可以直接複製到各個項目中使用，非常方便。如果你有接手過別人的項目，就可以很明顯感受到幾個項目一般都會有一些相同的工具類方法，這些方法就是之前開發者的常用代碼片段。 現在前端社區相當完 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類