一、Vue 3 新增特性

1. Composition API

• 概述：
  • Composition API 提供了一種更靈活和強大的方式來組織和復用邏輯。
  • 適用于復雜組件和邏輯復用場景。
• 主要功能：
  • setup 函數：組件的入口點，用于定義響應式數據、方法、生命周期鉤子等。
  • 響應式 API：ref 和 reactive 提供更細粒度的響應式控制。
  • 生命周期鉤子：onMounted、onUnmounted 等新生命周期鉤子。
  • 計算屬性和監聽器：computed 和 watch 的 Composition API 版本。
• 示例：

  <template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
  </template><script>
  import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};onMounted(() => {console.log('Component mounted');});return { count, increment };}
  };
  </script>
  

2. Teleport

• 概述：
  • Teleport 允許將組件的內容渲染到 DOM 中的其他位置，而不改變組件的邏輯結構。
• 用途：
  • 適用于模態框、提示框等需要脫離當前組件樹的場景。
• 示例：

  <template><button @click="showModal = true">Open Modal</button><teleport to="body"><div v-if="showModal" class="modal"><p>This is a modal!</p><button @click="showModal = false">Close</button></div></teleport>
  </template><script>
  import { ref } from 'vue';export default {setup() {const showModal = ref(false);return { showModal };}
  };
  </script><style>
  .modal {position: fixed;top: 50%;