Vue3作為前端開發中的一顆新星，以其效能最佳化、更易用的API和對TypeScript的友好支持贏得了廣大開發者的喜愛。本文將帶你深入Vue3的世界，總結30個你夜裏必須掌握的知識點。
Vue3簡介
Vue3是Vue.js的最新版本，引入了許多新特性，包括Composition API、Teleport、Fragments等，旨在提高開發效率和執行效能。
一、Composition API
Composition API是Vue3中最重要的新增特性之一，它提供了一種新的編寫元件的方式。
import { ref, onMounted } from 'vue';export default { setup() { const count = ref(0); onMounted(() => { console.log('Component is mounted!'); }); return { count }; }};
二、Reactivity API
Vue3的響應式系統得到了重寫和最佳化，使用ref和reactive可以更靈活地建立響應式數據。
import { reactive } from 'vue';const state = reactive({ count: 0 });
三、Teleport
Teleport是Vue3的一個新特性，允許你將子元件樣版的一部份渲染到DOM的任何位置。
<Teleport to="body"><div>這將被渲染到body裏</div></Teleport>
四、Fragments
在Vue3中，元件可以有多個根節點，這一特性稱為Fragments，這簡化了許多元件的結構，使得編寫元件更加靈活。
<template> <header>這是頭部</header> <main>這是主體內容</main> <footer>這是尾部</footer></template>
五、Setup Script
Vue3引入了<script setup>語法糖，使得Composition API的程式碼更加簡潔。
<script setup>import { ref } from 'vue';const count = ref(0);</script>
六、Vue3與TypeScript
Vue3從一開始就設計為與TypeScript相容，為開發者提供了強大的類別支持和增強的開發體驗。
import { defineComponent, ref } from 'vue';export default defineComponent({ setup() { const count = ref<number>(0); return { count }; }});
七、Vite作為構建工具
Vue3與Vite結合使用，提供了極速的開發環境和更快的熱多載體驗。
// vite.config.jsimport { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';export default defineConfig({ plugins: [vue()]});
八、自訂指令
Vue3對自訂指令的API進行了更新，使其更加靈活和強大。
import { createApp } from 'vue';const app = createApp({});app.directive('focus', { mounted(el) { el.focus(); }});
九、Vuex 4.x
Vuex 4.x專為Vue3設計，保持了與Vuex 3相似的API，同時相容Composition API。
import { createStore } from 'vuex';const store = createStore({ state() { return { count: 0 }; }, mutations: { increment(state) { state.count++; } }});export default store;
十、Vue Router 4
Vue Router 4是為Vue3量身客製的，完全支持Composition API。
import { createRouter, createWebHistory } from 'vue-router';import Home from './views/Home.vue';const router = createRouter({ history: createWebHistory(), routes: [{ path: '/', component: Home }]});export default router;
十一、Provide / Inject
Vue3中的provide和injectAPI允許更靈活的跨元件通訊，特別是在使用Composition API時。
// 父元件import { provide } from 'vue';export default { setup() { provide('message', 'hello from parent'); }}// 子元件import { inject } from 'vue';export default { setup() { const message = inject('message'); return { message }; }};
十二、動態元件 & 異步元件
Vue3提供了更靈活的動態元件和異步元件支持，使得按需載入和渲染元件更加高效。
import { defineAsyncComponent } from 'vue';const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'));// 在樣版中使用<template> <component :is="AsyncComponent"></component></template>
十三、響應式Refs的陣列解構
Vue3讓響應式系統和陣列解構配合得更加緊密，使得使用陣列解構時能夠保持響應性。
import { ref } from 'vue';const numbers = ref([1, 2, 3]);const [one, two, three] = numbers.value; // 解構後的變量不是響應式的
十四、v-model的改進
Vue3對v-model進行了增強，支持自訂修飾詞，使得雙向數據繫結更加靈活和強大。
<template> <input v-model.trim="username" /></template><script>import { ref } from 'vue';export default { setup() { const username = ref(''); return { username }; }};</script>
十五、Suspense元件
Vue3引入了Suspense元件，允許你等待異步元件的載入，提供更流暢的使用者體驗。
<template> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense></template><script>import { defineAsyncComponent } from 'vue';const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'));export default { components: { AsyncComponent }};</script>
十六、全域API的更改
Vue3對全域API做了調整，使得它們更加模組化，易於tree-shaking，減少了最終包的體積。
import { createApp } from 'vue';import App from './App.vue';const app = createApp(App);app.mount('#app');
十七、測試工具的改進
Vue3提升了對單元測試和端到端測試的支持，讓測試變得更加容易和有效。
// 使用Vue Test Utils（Vue3版）進行元件測試import { mount } from '@vue/test-utils';import HelloWorld from './HelloWorld.vue';test('HelloWorld component', () => { const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vue 3' } }); expect(wrapper.text()).toContain('Hello Vue 3');});
十八、使用watchEffect進行副作用追蹤
Vue3的watchEffect函數允許你自動追蹤響應式狀態的變化，並執行副作用操作。
import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => console.log(count.value));// 當count.value變化時，自動執行console.log
十九、使用v-model進行元件間的雙向繫結
Vue3允許在自訂元件上使用v-model進行雙向繫結，使元件間的數據流更加直觀。
<template> <ChildComponent v-model="parentValue" /></template><script>import { defineComponent, ref } from 'vue';import ChildComponent from './ChildComponent.vue';export default defineComponent({ components: { ChildComponent }, setup() { const parentValue = ref('initial value'); return { parentValue }; }});</script>
二十、動態指令參數
Vue3支持動態指令參數，這使得指令的使用更加靈活。
<template> <a v-bind:[dynamicAttr]="url">Dynamic Attribute Binding</a></template><script>import { ref } from 'vue';export default { setup() { const dynamicAttr = ref('href'); const url = ref('https://vuejs.org'); return { dynamicAttr, url }; }};</script>
二十一、使用emit進行子父元件通訊
Vue3中，元件可以透過emit函數觸發自訂事件，實作子父元件之間的通訊。
<template> <button @click="$emit('custom-event', 'data')">Click Me</button></template><script>import { defineComponent } from 'vue';export default defineComponent({ emits: ['custom-event']});</script>
二十二、使用Slots進行內容分發
Vue3的插槽（Slots）機制允許你定義元件樣版的可替換內容，使元件的復用和組合更加靈活。
<template> <div> <header> <slot name="header">Default Header</slot> </header> <main> <slot>Default Content</slot> </main> <footer> <slot name="footer">Default Footer</slot> </footer> </div></template>
二十三、使用createApp的API進行套用建立和掛載
Vue3推薦使用createApp函數進行套用的建立和掛載，這為套用提供了更好的封裝和配置能力。
import { createApp } from 'vue';import App from './App.vue';createApp(App).mount('#app');
二十四、Pinia：Vue3的狀態管理解決方案
隨著Vue3的推出，Pinia成為了推薦的狀態管理庫，以其簡潔的API和良好的TypeScript支持優勢。
import { defineStore } from 'pinia';export const useMainStore = defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++; } }});
二十五、Vue3的動態元件 & keep-alive
Vue3中，<component>標簽配合:is內容可以動態切換元件，而<keep-alive>可以緩存非活動元件例項。
<template> <keep-alive> <component :is="currentComponent"></component> </keep-alive></template><script>import { defineComponent, ref } from 'vue';import ComponentA from './ComponentA.vue';import ComponentB from './ComponentB.vue';export default defineComponent({ setup() { const currentComponent = ref('ComponentA'); return { currentComponent, ComponentA, ComponentB }; }});</script>
二十六、Vue3的自訂渲染器
Vue3提供了建立自訂渲染器的能力，允許開發者對底層的DOM操作進行完全控制，開啟了為特定環境客製渲染器的可能性。
import { createRenderer } from 'vue';const { createApp } = createRenderer({ createElement(type) { // 建立元素的邏輯 }, insert(child, parent, anchor) { // 插入元素的邏輯 } // 更多自訂渲染邏輯...});const app = createApp(MyComponent);app.mount('#app');
二十七、使用vite-plugin-vue-layouts實作Vue3中的布局管理
Vue3結合Vite可以使用vite-plugin-vue-layouts外掛程式來方便地管理套用布局，使得布局成為可復用的元件，簡化了頁面結構的定義。
// vite.config.jsimport VueLayouts from 'vite-plugin-vue-layouts';export default defineConfig({ plugins: [VueLayouts()]});
二十八、Vue3的過渡與動畫
Vue3提供了<Transition>元件，使得在套用中添加入場和離場動畫變得簡單。
<template> <Transition name="fade"> <div v-if="show">Fade In</div> </Transition></template><script>import { ref } from 'vue';export default { setup() { const show = ref(false); return { show }; }};</script>< style>.fade-enter-active, .fade-leave-active { transition: opacity 0.5s;}.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0;}</ style>
二十九、Vue3的Portals
與Teleport類似，Portals是另一個社區外掛程式，用於將子元件渲染到DOM的任何位置，Vue3的Teleport本質上是此概念的官方實作。
三十、Vue3的API函數：useAttrs和useSlots
Vue3引入了useAttrs和useSlots，這兩個Composition API函數允許你在setup函數中存取元件的內容和插槽。
import { defineComponent, useAttrs, useSlots } from 'vue';export default defineComponent({ setup() { const attrs = useAttrs(); const slots = useSlots(); return { attrs, slots }; }});
透過以上30個核心技巧的學習和套用，你將能夠充分利用Vue3帶來的新特性和優勢，提升你的前端開發能力。熬夜總結這些知識點，全都掌握後，你確實可以在Vue3的世界裏稱王稱霸。
如果喜歡，可以點贊收藏，關註喲~
