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的世界里称王称霸。
如果喜欢，可以点赞收藏，关注哟~
