Vue 3 的 <Teleport> 功能與用法

1. 基本用法

<Teleport> 是 Vue 3 的一個內置組件，允許將組件的內容渲染到 DOM 中的任意位置，而不改變其邏輯結構。以下是基本用法：

• 定義目標 DOM 元素：

  <div id="teleport-target"></div>
  

• 在 Vue 組件中使用 <Teleport>：

  <template><button @click="isModalOpen = true">Open Modal</button><Teleport to="#teleport-target"><div v-if="isModalOpen" class="modal"><p>This is a modal!</p><button @click="isModalOpen = false">Close</button></div></Teleport>
  </template>
  

  在這個例子中，模態框會被渲染到 #teleport-target 元素中。

2. 動態目標節點

可以通過動態綁定 to 屬性來改變目標節點：

• 示例代碼：

  <Teleport :to="targetElement"><p>This will be rendered in the target element.</p>
  </Teleport>
  

  在 mounted 鉤子中動態設置目標節點：

  export default {data() {return {targetElement: null};},mounted() {this.targetElement = document.querySelector('#custom-element');}
  };
  ```。

3. 性能優化

• <Teleport> 可以減少不必要的 DOM 操作和重繪，從而提升頁面性能。
• 通過將模態框或浮動元素渲染到 body 標簽下，避免了父組件的 DOM 結構對渲染位置的限制。

4. 注意事項

• 目標 DOM 元素必須在組件掛載之前存在，否則會導致警告。
• 如果目標元素是由 Vue 渲染的，需要確保在掛載 <Teleport> 之前先掛載目標元素。

5. 應用場景

• 模態框：將模態框內容渲染到 body 標簽下。
• 浮動元素：如工具提示、側邊欄等。
• 內容分離：將不直接影響頁面結構的內容渲染到頁面的特定位置。

6. 與其他 Vue 特性結合

• 可以與 Vue Router 和 Vuex 結合使用，管理跨組件的狀態。

通過 <Teleport>，可以更加靈活地控制組件的渲染位置，同時提升性能和用戶體驗。