在上一篇《Vue3 入门详解》中我们已经掌握了 Vue3 的核心基础环境搭建、组合式API、组件通信和简单实战案例。但入门只是起点实际生产开发中我们还需要解决「页面跳转」「跨组件数据共享」「异步处理」「工程化优化」等问题。本文作为 Vue3 入门的后续进阶内容将循序渐进讲解 Vue3 生态核心工具Vue Router、Pinia、高级特性Teleport、Suspense 等、异步处理最佳实践以及工程化配置技巧帮你从「会用」升级到「能用好」适配生产级项目开发需求。全程结合实例新手也能轻松跟上建议配合上一篇入门教程一起学习效果更佳。一、Vue3 路由管理Vue Router 4 详解单页应用核心单页应用SPA的核心是「无刷新页面跳转」Vue 官方提供的Vue Router 4是 Vue3 的配套路由工具专门用于实现页面路由跳转、路由传参、路由守卫等功能是开发多页面 Vue 项目的必备工具。注意Vue Router 4 仅支持 Vue3Vue2 需使用 Vue Router 3两者语法有差异本文聚焦 Vue Router 4。1.1 安装 Vue Router 4在已创建的 Vue3 项目中执行以下命令安装npm install vue-router41.2 路由基本配置核心步骤Vue Router 4 的配置流程简洁清晰核心分为 3 步创建路由实例 → 定义路由规则 → 挂载到 Vue 应用具体操作如下步骤1创建路由配置文件在 src 目录下新建router文件夹创建index.js文件路由核心配置文件代码如下// src/router/index.js // 1. 从vue-router中导入核心API import { createRouter, createWebHistory } from vue-router // 2. 导入需要路由跳转的页面组件可按需创建如Home、About // 建议页面组件放在 src/views 目录下区分公共组件components import Home from ../views/Home.vue import About from ../views/About.vue // 3. 定义路由规则数组形式每一个对象对应一个路由 const routes [ { path: /, // 路由路径URL地址 name: Home, // 路由名称可选用于编程式导航 component: Home // 路由对应渲染的组件 }, { path: /about, name: About, component: About // 可选路由懒加载优化性能按需加载组件 // component: () import(../views/About.vue) } ] // 4. 创建路由实例 const router createRouter({ // 路由模式createWebHistory() → HTML5 模式无#号createWebHashHistory() → 哈希模式有#号 history: createWebHistory(), routes // 传入路由规则 }) // 5. 导出路由实例供main.js挂载 export default router步骤2在 main.js 中挂载路由修改上一篇中的 main.js导入路由实例并挂载让路由生效// src/main.js import { createApp } from vue import App from ./App.vue import ./assets/main.css // 导入路由实例 import router from ./router // 挂载路由使用.use(router) createApp(App).use(router).mount(#app)步骤3使用路由组件实现页面跳转Vue Router 提供了两个核心组件用于实现页面跳转和路由内容渲染router-link替代 a 标签实现无刷新跳转默认渲染为 a 标签可通过 tag 属性修改router-view路由匹配到的组件会渲染到这个标签所在的位置。修改 App.vue添加路由导航和路由视图template lt;div idappgt; !-- 路由导航点击切换页面 -- nav stylepadding: 20px; background: #f5f5f5; !-- to 属性对应路由path -- router-link to/ stylemargin-right: 20px;首页/router-link router-link to/aboutgt;关于我们lt;/router-linkgt; lt;/navgt; !-- 路由视图匹配到的组件会渲染在这里 -- router-view stylepadding: 20px; / /div /template script setup // 无需额外导入router-link和router-viewVue Router会自动注册 /script1.3 核心路由功能必学掌握以下 4 个核心功能就能满足 90% 的路由使用场景1.3.1 路由传参两种常用方式实际开发中经常需要跳转页面时传递数据如详情页传递商品IDVue Router 4 提供两种常用传参方式方式1动态路由传参路径传参推荐适合传递唯一标识如ID路径中会显示参数例如/detail/123修改路由规则添加动态参数用:标识// src/router/index.js const routes [ // 新增详情页路由动态参数id { path: /detail/:id, // :id 是动态参数可自定义名称 name: Detail, component: () import(../views/Detail.vue) // 懒加载组件 } ]懒加载组件 } ]跳转时传递参数!-- 模板中跳转to 绑定路径拼接参数 -- router-link :to/detail/${123}商品123详情/router-link !-- 编程式导航脚本中跳转使用useRouter钩子 -- script setup import { useRouter } from vue-router const router useRouter() const goToDetail () { // push方法跳转path拼接参数 router.push(/detail/${123}) // 也可以用nameparams需配合name使用 // router.push({ name: Detail, params: { id: 123 } }) } /script详情页接收参数使用useRoute钩子获取路由信息!-- Detail.vue -- template div h3商品详情页/h3 p商品ID{{ route.params.id }}/p /div /template script setup // 导入useRoute钩子获取当前路由信息 import { useRoute } from vue-router const route useRoute() // 脚本中访问参数route.params.id console.log(商品ID, route.params.id) /script方式2查询参数query传参适合传递非唯一标识如筛选条件路径中显示为?keyvalue例如/search?keywordvue3!-- 模板中跳转 -- router-link :to{ path: /search, query: { keyword: vue3 } }搜索vue3/router-link !-- 编程式导航 -- script setup import { useRouter } from vue-router const router useRouter() const goToSearch () { router.push({ path: /search, query: { keyword: vue3, page: 1 } // 可传递多个参数 }) } /script !-- 接收参数同样用useRoute -- script setup import { useRoute } from vue-router const route useRoute() console.log(搜索关键词, route.query.keyword) // vue3 console.log(页码, route.query.page) // 1 /script1.3.2 路由懒加载性能优化默认情况下项目打包时所有页面组件会打包到一个文件中导致文件体积过大页面加载速度慢。路由懒加载可以实现“按需加载”只有当用户跳转该路由时才加载对应的组件减小初始打包体积提升首屏加载速度。使用方式非常简单将路由规则中的component改为箭头函数导入即可// 普通导入不推荐会打包到同一个文件 import Home from ../views/Home.vue // 路由懒加载推荐按需加载 const Home () import(../views/Home.vue) // 路由规则中直接使用 const routes [ { path: /, name: Home, component: () import(../views/Home.vue) // 懒加载 } ]1.3.3 路由守卫权限控制核心路由守卫用于“拦截路由跳转”实现权限控制如未登录禁止访问个人中心、页面跳转前的逻辑处理如判断表单是否未提交等功能。Vue Router 4 提供 3 种常用守卫全局守卫、路由独享守卫、组件内守卫。1. 全局守卫作用于所有路由在 router/index.js 中配置对所有路由跳转生效常用beforeEach跳转前拦截// src/router/index.js import { createRouter, createWebHistory } from vue-router const router createRouter({ ... }) // 全局前置守卫跳转前执行 router.beforeEach((to, from, next) { // to要跳转的目标路由 // from当前所在的路由 // next()放行允许跳转next(/login)强制跳转到登录页next(false)禁止跳转 // 示例未登录禁止访问个人中心/profile const isLogin localStorage.getItem(token) // 模拟登录状态 if (to.path /profile !isLogin) { // 未登录强制跳转到登录页 next(/login) } else { // 已登录或访问的是其他页面放行 next() } }) export default router2. 组件内守卫作用于单个组件在组件内部使用用于控制当前组件的路由跳转常用onBeforeRouteEnter进入组件前、onBeforeRouteLeave离开组件前script setup import { onBeforeRouteEnter, onBeforeRouteLeave } from vue-router // 进入组件前执行此时组件还未创建无法访问this需用next回调 onBeforeRouteEnter((to, from, next) { console.log(即将进入当前组件) next() }) // 离开组件前执行常用于判断表单是否未提交 onBeforeRouteLeave((to, from, next) { const isConfirm confirm(表单未提交确定离开吗) if (isConfirm) { next() // 确认离开放行 } else { next(false) // 取消离开禁止跳转 } }) /script1.4 路由进阶嵌套路由多级菜单实际项目中经常有“父菜单包含子菜单”的场景如首页包含首页概览、数据统计此时需要使用嵌套路由核心是在父路由中添加children数组定义子路由规则。示例首页嵌套两个子路由// src/router/index.js const routes [ { path: /, name: Home, component: () import(../views/Home.vue), // 子路由children数组每一个子路由对应父组件中的一个router-view children: [ { path: , // 子路由默认路径父路由路径 子路由空路径 / name: HomeIndex, component: () import(../views/HomeIndex.vue) // 首页概览 }, { path: data, // 子路由路径父路由路径 子路由路径 /data name: HomeData, component: () import(../views/HomeData.vue) // 数据统计 } ] } ]父组件Home.vue中需添加router-view用于渲染子路由组件!-- Home.vue 父组件 -- template lt;divgt; lt;h2gt;首页lt;/h2gt; !-- 子路由导航 -- div stylemargin: 20px 0; router-link to/ stylemargin-right: 20px;首页概览/router-link router-link to/data数据统计/router-link lt;/divgt; !-- 子路由视图子组件会渲染在这里 -- router-view / /div /template二、Vue3 状态管理Pinia 详解替代Vuex上一篇我们学习了父子组件通信props emit但在中大型项目中会有「跨组件、跨页面数据共享」的需求如用户信息、购物车数据此时 props emit 会变得繁琐且难以维护。Vue3 官方推荐使用Pinia作为状态管理工具替代了 Vue2 中的 Vuex。Pinia 语法更简洁、更贴合组合式API天生支持 TypeScript无需复杂的 mutations、actions 区分上手成本极低是当前 Vue3 项目的首选状态管理方案。2.1 安装 Pinianpm install pinia2.2 初始化 Pinia挂载到Vue应用在 main.js 中创建 Pinia 实例并挂载步骤如下// src/main.js import { createApp } from vue import App from ./App.vue import ./assets/main.css import router from ./router // 1. 导入Pinia核心API import { createPinia } from pinia // 2. 创建Pinia实例 const pinia createPinia() // 3. 挂载Pinia需在mount前 createApp(App).use(router).use(pinia).mount(#app)2.3 创建 Pinia 仓库核心Pinia 中「仓库Store」是存储数据的核心一个仓库对应一类共享数据如用户仓库、购物车仓库。创建仓库的步骤步骤1创建仓库文件在 src 目录下新建stores文件夹创建仓库文件如userStore.js用户相关数据// src/stores/userStore.js // 1. 导入defineStore用于定义仓库 import { defineStore } from pinia // 2. 定义仓库defineStore(仓库唯一标识, 配置对象) // 仓库唯一标识字符串全局唯一不能重复 export const useUserStore defineStore(user, { // state存储共享数据类似Vue2的dataVue3的响应式数据 state: () ({ token: localStorage.getItem(token) || , // 登录令牌 userInfo: JSON.parse(localStorage.getItem(userInfo)) || {} // 用户信息 }), // getters计算属性类似Vue的computed基于state派生新数据有缓存 getters: { // 判断用户是否登录派生数据 isLogin: (state) !!state.token, // 获取用户名简化用户信息访问 userName: (state) state.userInfo.name || 未登录 }, // actions修改state的方法类似Vue2的mutationsactions可同步可异步 actions: { // 同步修改登录成功保存用户信息 login(userData) { this.token userData.token this.userInfo userData.userInfo // 同步到localStorage持久化存储避免页面刷新数据丢失 localStorage.setItem(token, this.token) localStorage.setItem(userInfo, JSON.stringify(this.userInfo)) }, // 异步修改退出登录清除用户信息可包含接口请求 logout() { // 模拟异步接口请求如调用后端退出接口 setTimeout(() { this.token this.userInfo {} localStorage.removeItem(token) localStorage.removeItem(userInfo) }, 500) } } })步骤2在组件中使用仓库在任意组件中导入仓库方法创建仓库实例即可访问/修改共享数据template divgt; lt;h3gt;用户中心lt;/h3gt; !-- 访问state中的数据 -- p用户名{{ userStore.userName }}/p !-- 访问getters中的计算属性 -- p登录状态{{ userStore.isLogin ? 已登录 : 未登录 }}/p button clickhandleLogin v-if!userStore.isLogin登录/button button clickhandleLogout v-ifuserStore.isLogin退出登录/button /div /template script setup // 1. 导入仓库方法 import { useUserStore } from ../stores/userStore // 2. 创建仓库实例必须调用方法不能直接导入 const userStore useUserStore() // 3. 调用actions中的方法修改state const handleLogin () { // 模拟登录接口返回的数据 const userData { token: abc123456, userInfo: { name: 张三, age: 20 } } userStore.login(userData) // 调用同步方法 } const handleLogout () { userStore.logout() // 调用异步方法 } /script2.4 Pinia 核心特性必掌握2.4.1 直接修改 state无需 mutations与 Vuex 不同Pinia 允许直接修改 state 中的数据无需通过 mutations简化了操作script setup import { useUserStore } from ../stores/userStore const userStore useUserStore() // 直接修改state允许 const updateName () { userStore.userInfo.name 李四 } /script建议简单的修改可以直接操作 state复杂的逻辑如接口请求、多数据联动放在 actions 中便于维护。2.4.2 批量修改 state$patch当需要同时修改多个 state 数据时使用$patch方法更高效减少视图更新次数userStore.$patch({ token: def789, userInfo: { name: 王五, age: 22 } })2.4.3 仓库持久化避免刷新丢失数据默认情况下Pinia 的 state 存储在内存中页面刷新后数据会丢失。实际开发中我们需要将核心数据如 token、用户信息持久化到 localStorage/sessionStorage 中。两种实现方式手动持久化如上面的 login 方法同步数据到 localStorage使用插件pinia-plugin-persistedstate自动持久化推荐// 安装插件 npm install pinia-plugin-persistedstate// 初始化Pinia时使用插件main.js import { createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstate const pinia createPinia() pinia.use(piniaPluginPersistedstate) // 仓库中配置持久化userStore.js export const useUserStore defineStore(user, { state: () ({ ... }), getters: { ... }, actions: { ... }, // 配置持久化默认持久化所有state到localStorage persist: true // 自定义配置指定持久化的key和存储方式 // persist: { // key: userStore, // 存储的key // storage: sessionStorage, // 存储方式sessionStorage/localStorage // paths: [token] // 只持久化token字段 // } })2.4.4 多仓库管理Pinia 支持创建多个仓库用于区分不同类型的共享数据如用户仓库、购物车仓库、设置仓库互不干扰src/stores/userStore.js用户仓库src/stores/cartStore.js购物车仓库src/stores/settingStore.js设置仓库使用时分别导入对应的仓库方法即可import { useUserStore } from ../stores/userStore import { useCartStore } from ../stores/cartStore const userStore useUserStore() const cartStore useCartStore()三、Vue3 高级特性解锁更多实用功能掌握基础和生态工具后学习 Vue3 的高级特性能解决更多复杂场景的开发需求提升开发效率和代码质量。以下是最常用的 4 个高级特性重点掌握使用场景和基本用法。3.1 Teleport组件瞬移Teleport 译为“瞬移”核心功能是将组件渲染到指定的 DOM 节点中无论该节点在组件树的哪个位置。常用于弹窗、模态框、通知等组件解决“组件嵌套过深导致的样式污染、定位困难”问题。使用示例弹窗组件template div button clickisShow true打开弹窗lt;/buttongt; !-- Teleport将弹窗渲染到body节点下 -- Teleport tobody div classmodal v-ifisShow div classmodal-content h3弹窗标题/h3 p这是一个Teleport瞬移的弹窗/p button clickisShow false关闭/button /div /div /Teleport /div /template script setup import { ref } from vue const isShow ref(false) /script style scoped /* 弹窗样式不会被父组件scoped影响 */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } .modal-content { width: 300px; padding: 20px; background: #fff; border-radius: 4px; } /style核心说明to属性指定渲染的目标 DOM 节点如body、#app、.containerTeleport 内部的组件逻辑上仍属于当前组件可访问当前组件的响应式数据、方法只是渲染位置发生了变化解决的核心问题避免弹窗嵌套在多层组件中导致定位异常、z-index 冲突。3.2 Suspense异步组件加载Suspense 用于“等待异步组件加载完成”并显示加载状态如骨架屏、loading 动画解决异步组件加载时的空白问题提升用户体验。使用场景组件中包含异步请求、异步导入组件等场景。使用示例异步导入组件 加载状态template div h3异步组件加载示例/h3gt; !-- Suspense包裹异步组件提供加载状态 -- lt;Suspensegt; !-- #default异步组件加载完成后显示的内容 -- template #default AsyncComponent / !-- 异步导入的组件 -- lt;/templategt; !-- #fallback加载中显示的内容骨架屏、loading -- template #fallback div styletext-align: center; padding: 50px; 加载中... /div /template /Suspense /div /template script setup // 异步导入组件路由懒加载的写法本质是异步组件 const AsyncComponent defineAsyncComponent(() import(../components/AsyncComponent.vue)) /script补充组件中包含异步请求如 onMounted 中发起请求也可以用 Suspense 包裹配合 async/await 使用script setup import { ref, onMounted } from vue // 模拟异步请求获取数据 const fetchData () { return new Promise((resolve) { setTimeout(() { resolve(异步请求返回的数据) }, 1000) }) } // 异步获取数据await必须配合async const data ref() onMounted(async () { data.value await fetchData() }) /script3.3 provide / inject跨层级组件通信上一篇学习的 props emit 适合父子组件通信但对于“爷孙组件”“跨多层级组件”通信props emit 会需要层层传递繁琐且冗余。此时可以使用provide / inject实现“跨层级组件通信”无需层层传递。核心逻辑provide在父组件祖先组件中提供数据或方法inject在子组件、孙组件后代组件中注入并使用这些数据或方法。使用示例!-- 祖先组件父组件提供数据和方法 -- template div h3祖先组件/h3 p祖先组件数据{{ msg }}/p Child / /div /template script setup import { ref, provide } from vue import Child from ./Child.vue // 1. 定义响应式数据 const msg ref(我是祖先组件提供的数据) // 2. provide提供数据key, valuekey用于后代组件注入 provide(msgKey, msg) // 3. provide提供方法可用于后代组件修改祖先组件数据 provide(updateMsg, (newVal) { msg.value newVal }) /script !-- 后代组件孙组件注入并使用数据和方法 -- template div h4孙组件/h4 p注入的祖先数据{{ injectMsg }}/p button clickhandleUpdate修改祖先数据/button /div /template script setup import { inject } from vue // 1. inject注入数据key必须和provide的key一致 const injectMsg inject(msgKey) // 2. inject注入方法 const updateMsg inject(updateMsg) // 3. 调用注入的方法修改祖先组件数据 const handleUpdate () { updateMsg(孙组件修改了祖先数据) } /script注意provide / inject 适合跨层级、非频繁通信的场景频繁通信建议使用 Pinia 状态管理。3.4 自定义指令指令扩展Vue 内置了很多常用指令如 v-model、v-if、v-for但实际开发中我们可能需要自定义指令实现重复的 DOM 操作如权限控制、输入框防抖、元素拖拽。Vue3 中自定义指令分为「全局指令」和「局部指令」以下是全局指令的示例实现“权限控制”未登录用户隐藏元素示例自定义指令 v-permission// 1. 在main.js中注册全局自定义指令 import { createApp } from vue import App from ./App.vue import router from ./router import { createPinia } from pinia import { useUserStore } from ./stores/userStore const app createApp(App) const pinia createPinia() app.use(router).use(pinia) // 注册全局自定义指令v-permission app.directive(permission, { // mounted指令绑定到元素上时执行核心钩子 mounted(el, binding) { const userStore useUserStore() // binding.value指令传递的值如v-permission[admin]value就是[admin] const requiredRoles binding.value || [] // 判断用户是否有对应权限这里简化为判断是否登录 if (!userStore.isLogin requiredRoles.length 0) { // 无权限隐藏元素移除DOM或设置display: none el.style.display none // 或 el.remove() } } }) app.mount(#app)在组件中使用自定义指令template!-- 未登录用户隐藏该按钮 -- button v-permission[admin]gt;管理员操作lt;/buttongt; !-- 无需权限所有人可见 -- button v-permission普通操作/button /template核心说明自定义指令的核心是“封装重复的 DOM 操作”减少代码冗余常用钩子有 mounted绑定元素时、updated元素更新时。四、Vue3 工程化优化适配生产级项目入门阶段我们使用 Vite 快速创建项目但生产级项目需要考虑「性能优化」「代码规范」「环境配置」等问题以下是最基础、最实用的工程化优化技巧新手可直接落地。4.1 Vite 基础配置优化开发体验Vite 是 Vue3 推荐的构建工具默认配置已能满足大部分需求但我们可以通过修改vite.config.js文件优化开发体验和打包性能。常用配置示例vite.config.js// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue // 导入path模块需安装types/nodenpm install types/node --save-dev import path from path export default defineConfig({ // 插件配置 plugins: [vue()], // 路径别名简化导入路径如代替src resolve: { alias: { : path.resolve(__dirname, ./src) } }, // 开发服务器配置解决跨域问题 server: { port: 5173, // 开发服务器端口默认5173 open: true, // 启动后自动打开浏览器 proxy: { // 代理配置解决前端跨域请求后端接口 /api: { target: http://localhost:3000, // 后端接口地址 changeOrigin: true, // 允许跨域 rewrite: (path) path.replace(/^\/api/, ) // 重写路径去掉/api前缀 } } }, // 打包配置优化生产环境打包 build: { outDir: dist, // 打包输出目录默认dist minify: terser, // 压缩方式terser比esbuild压缩率更高 sourcemap: false // 生产环境不生成sourcemap减小打包体积 } })核心优化点路径别名用代替src简化导入路径如import Home from /views/Home.vue跨域代理解决前端请求后端接口的跨域问题无需后端配置CORS打包优化关闭sourcemap、使用terser压缩减小打包体积。4.2 代码规范ESLint Prettier多人协作项目中代码规范至关重要ESLint 用于检查代码语法错误、规范代码风格Prettier 用于统一代码格式如缩进、引号、换行两者结合使用能保证代码的一致性和可读性。安装和配置步骤简化版// 安装依赖 npm install eslint prettier eslint-plugin-vue eslint-config-prettier --save-dev在项目根目录创建.eslintrc.js和.prettierrc配置文件配置规则可根据项目需求调整之后在 package.json 中添加脚本scripts: { lint: eslint . --ext .vue,.js,.jsx,.ts,.tsx, lint:fix: eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix }执行npm run lint:fix可自动修复大部分代码规范问题。4.3 性能优化核心技巧生产级必备除了路由懒加载、Pinia 持久化以下 3 个优化技巧能大幅提升项目性能1. 图片优化图片是项目体积的主要来源优化方式使用合适的图片格式如 webp、avif比 jpg/png 体积小 30% 以上使用 Vite 内置的图片处理自动优化图片无需额外配置图片懒加载使用v-lazy指令需安装vue3-lazyload插件。2. 避免不必要的渲染Vue 是响应式框架数据变化会触发组件重新渲染过多的渲染会导致性能下降优化方式使用computed缓存计算结果避免频繁计算使用v-once指令只渲染一次后续数据变化不重新渲染适合静态内容使用defineProps定义 props 类型避免不必要的 props 更新。3. 打包体积优化除了路由懒加载、关闭 sourcemap还可以按需导入第三方组件库如 Element Plus、Ant Design Vue避免全量导入使用rollup-plugin-visualizer插件分析打包体积找出体积过大的文件针对性优化。五、总结与进阶路线5.1 本文核心知识点总结本文作为 Vue3 入门的后续进阶教程核心覆盖了 4 大模块足够支撑你开发生产级中小型 Vue3 项目Vue Router 4实现单页应用路由跳转、传参、权限控制、嵌套路由是多页面项目的核心Pinia替代 Vuex 的状态管理工具简洁易用支持异步操作和持久化解决跨组件数据共享高级特性Teleport组件瞬移、Suspense异步加载、provide/inject跨层级通信、自定义指令解决复杂场景开发需求工程化优化Vite 配置、代码规范、性能优化让项目更健壮、更高效。5.2 后续进阶学习路线从熟练到精通掌握本文内容后你已经具备 Vue3 生产级开发能力后续可按照以下路线进阶成为 Vue3 高级开发深入 TypeScript学习 Vue3 TypeScript 开发实现强类型约束解决大型项目类型混乱问题第三方组件库熟练使用 Element Plus、Ant Design Vue 等组件库提升开发效率高级工程化学习 Vite 高级配置、CI/CD 部署如 GitHub Actions、Docker 容器化性能优化进阶学习虚拟滚动、懒加载、代码分割、服务端渲染SSR等高级优化技巧实战项目开发中型项目如博客系统、电商前台融会贯通所有知识点积累项目经验。Vue3 的学习是一个“循序渐进、实战为王”的过程建议每学习一个知识点就动手写代码实践避免“看会了但写不出来”。结合上一篇入门教程和本文的进阶内容你已经超越了大部分 Vue3 新手只要坚持实战很快就能熟练掌握 Vue3 并应用到实际工作中。