Web Components 取代 Vue？我覺得不太行~

2024-05-06碼農

模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑 可私信找我~已幫助100+名同學完成改造！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

Web Components

原因

探討使用 Web Components 的原因，我們已經知道像 Vue 和 React 這樣的成熟框架存在，但是有沒有深入思考過為什麽選擇使用這些框架？核心理由無非是為了減少編碼工作量，透過框架減少程式碼重復，盡管這同時引入了一些原生不支持的特性，從而增加了一定的復雜性。當我了解到 Web Components 時，我開始思考是否可以用它來取代 Vue，因為 Vue 的主要優勢之一就是能夠實作元件的封裝和復用

構成

Web Components 由三個主要部份構成，與Vue的樣版非常相似：

自訂元素（Custom Element）： 這是一組JavaScript API，使你能夠定義自訂元素及其行為，以便根據需要在使用者介面中使用它們

影子DOM（Shadow DOM）： 這也是一組JavaScript API，用於將一個封閉的「影子」DOM樹附加到元素上（與主文件DOM分開渲染），並管理其相關功能。這樣，你可以確保元素的功能是私有的，因此它們可以被指令碼化和樣式化，而不會與文件的其他部份產生沖突

HTML樣版（HTML Template）： template 和 slot 元素讓你能夠建立不會立即顯示在渲染頁面中的標記樣版。然後，這些樣版可以作為自訂元素結構的基礎，被反復使用

使用

接下來說一下 Web Components 的基本使用~

自訂元件

建立一個基礎的自訂元件包含以下步驟：

1、 繼承： 自訂元素需要透過繼承HTMLElement類（或其子類別）來建立

2、 建立樣版： 使用document.createElement('template')來建立一個新的樣版元素

3、 獲取影子DOM： 透過元素的attachShadow方法獲取影子DOM，為元素提供封裝的DOM結構

4、 添加內容： 將樣版內容透過appendChild方法添加到影子DOM中。使用cloneNode方法複制節點，避免對原始樣版的汙染。

5、 定義元件： 使用customElements.define('component-tag-name', Component className)來定義元件，使其可在頁面中使用

至此，一個最基礎的自訂元件建立完成

拓展點：

在最初階段，我嘗試透過WebComponent.html的形式編寫自訂元件，這樣可以直接在標簽中寫樣式和HTML，便於編輯器提供程式碼提示和格式化。然而，由於當前標簽不支持直接匯入HTML檔，除非透過HTTP GET請求載入外部HTML，但這種方法似乎違背了初衷。

要監聽內容的變化，必須透過static get observedAttributes靜態方法聲明哪些內容是被監聽的。之後，就可以在attributeChangedCallback回呼函式中捕獲內容變化。

自訂元素也擁有簡化的生命周期勾點，雖然只有三個，但它們的存在使得狀態管理變得簡單。

支持使用插槽（slots），類似於Vue，可以透過的方式來實作內容的插入。

在html中使用

當引入自訂元件時，建議使用defer內容，這樣可以確保指令碼在文件解析完成後再執行，避免潛在的執行順序問題。自訂元件的標簽使用方式與Vue非常相似，即使用元件在define時指定的名稱，並透過slot="slot-name"來指定插槽的名稱。在Vue計畫中，可以透過簡單地匯入元件的JavaScript檔（例如import "./components/WebComponent/WebComponent.js";）來使用這些自訂元素。

在實際使用中，可能會遇到一些挑戰：

通常情況下，自訂元件內部和父元件都會包含一些業務邏輯，這可能需要父元件向子元件暴露某些方法。例如，在自訂元件被加入到頁面（即在connectedCallback被呼叫）之後，可能需要通知父元件，這時可以透過呼叫在父元件中定義的this.ready()方法。為了避免connectedCallback在ready方法定義之前執行而導致錯誤，推薦在引入自訂元件的指令碼標簽中加上defer

若需呼叫自訂元件的方法，必須確保自訂元件已經完全建立好。因此，在範例中透過定義一個ready方法，並在connectedCallback呼叫之後執行它，或者等待頁面的onload事件觸發後執行。這意味著定義和呼叫之間的執行順序需要特別註意，以避免由於執行順序引起的問

監聽內容變化時，應使用setAttribute方法來修改內容值，因為直接修改內容（如extendP.attributes['size']=200）不會觸發內容監聽回呼

關於插槽（slot）傳值的問題，目前似乎沒有直接的方法來實作

簡而言之，雖然自訂元件的使用看似簡單直接，但在實際開發中還是需要註意指令碼載入順序、元件通訊和內容監聽等細節問題，以確保元件能夠正確無誤地執行

參考文章：https://juejin.cn/post/7309693162368565299