?? Vue3 官方文档系统学习路线

Vue3 官方文档系统学习路线

第一阶段：Vue3 核心基础

目标：掌握 Vue3 基础语法，能写简单的 Vue 组件。

• 创建 Vue 应用

  Vue3 项目初始化：使用 createApp() 创建一个 Vue3 项目。

  模板基础语法：掌握 {{ }} 插值、v-bind 绑定属性、v-html 动态显示文本、绑定 href、修改 style。

• 响应式基础

  ref() 和 reactive()：创建响应式数据。

  数据绑定：实现计数器功能，按钮点击 count++。

• 计算属性与侦听器

  computed()：自动计算派生值，如输入数字自动显示它的平方。

  watch() 和 watchEffect()：监听数据变化，并输出日志。

• 类与样式绑定

  v-bind:class 和 v-bind:style：点击切换按钮，改变背景色。

• 条件渲染与列表渲染

  v-if 和 v-show：点击按钮显示/隐藏文本。

  v-for：渲染用户列表，支持新增/删除用户。

• 事件绑定与表单输入

  事件绑定：使用 @click 和 @input 绑定事件。

  v-model：实现输入框双向绑定数据。

练习建议：

• 创建一个简单的 Vue3 项目，实现上述所有功能点。
• 尝试修改和扩展项目，加深理解。

第二阶段：Vue3 组件化开发

目标：能拆分 Vue 组件，实现父子通信。

• 组件基础

  template 和 script setup：拆分组件，如 Button 组件。

  组件注册：使用 defineProps 和 defineEmits 注册组件属性和事件。

• 组件通信

  props 传值：父组件向子组件传递数据。

  事件 emit 传值：子组件向父组件发送事件。

• 组件 v-model

  实现组件内的 modelValue 双向绑定。

• 插槽 (slot)

  默认插槽和具名插槽：创建 Modal 组件，支持自定义 header 和 footer。

• provide / inject

  祖先组件向子孙组件共享数据。

• 异步组件

  使用 defineAsyncComponent() 延迟加载组件。

练习建议：

• 创建一个包含多个组件的 Vue3 项目，实现父子组件通信和插槽功能。
• 尝试使用异步组件优化项目性能。

第三阶段：Vue3 进阶应用

目标：掌握 Vue3 的更高级特性，提高开发效率。

• 组合式 API (setup)

  使用 setup() 里的生命周期钩子，如 onMounted() 和 onUpdated()。

  将 data() 迁移到 setup() 中。

• watch vs computed

  比较计算属性和侦听器的使用场景。

• 自定义指令

  封装自定义指令，如 v-focus。

• Vue 插件

  使用 app.use() 安装插件，如 Pinia 进行状态管理。

• 过渡动画

  使用 Transition 和 TransitionGroup 实现动画效果。

• KeepAlive / Teleport

  保持组件状态、跨 DOM 层级挂载。

练习建议：

• 创建一个包含组合式 API、自定义指令和过渡动画的 Vue3 项目。
• 尝试使用 Pinia 进行状态管理，并优化项目性能。

第四阶段：Vue3 项目实战

目标：能够独立开发 Vue3 项目。

• 单文件组件 (SFC)

  使用 script setup + style scoped 搭建组件化项目。

• Vue3 路由 (vue-router)

  实现动态路由和嵌套路由。

• 状态管理 (Pinia)

  创建全局 store，管理用户状态。

• Vue3 与后端 API 交互

  使用 fetch() 或 axios 请求数据。

• 服务端渲染 (SSR)

  了解 Nuxt.js，实现 Vue3 SSR。

• Vue3 性能优化

  使用 defineAsyncComponent() 和懒加载优化项目性能。

练习建议：

• 创建一个完整的 Vue3 项目，包含路由、状态管理和后端 API 交互。
• 尝试使用 Nuxt.js 实现服务端渲染。

第五阶段：Vue3 高级优化与 TypeScript

目标：掌握 Vue3 的最佳实践，提高开发能力。

• Vue3 TypeScript

  使用 TypeScript 进行类型推导，如 defineProps<T>() 和 defineEmits<T>()。

• Vue3 编程范式

  比较 Composition API 和 Options API，用组合式 API 改造 Vue2 项目。

• Vue3 性能优化

  使用 shallowRef() 和 markRaw() 避免 Vue 过度响应式。

• Vue3 代码组织

  使用 composables 逻辑复用，创建 useFetch 组合函数。

• Vue3 生产环境部署

  使用 Vite 打包优化，部署 Vue3 项目到 Vercel。

练习建议：

• 将现有 Vue3 项目迁移到 TypeScript。
• 使用 composables 优化代码结构，提高代码复用性。
• 尝试将项目部署到生产环境，并进行性能优化。

Vue3 进阶建议：

• 每天动手写代码，加深理解。
• 搭建自己的 Vue3 项目，如 TodoList、博客系统等。
• 看官方文档，理解概念并动手实践。
• 有问题及时提问，不要卡太久。