缺什么补什么：别让组件通信和状态管理成为盲区

这份资料对应的是 Vue.js 2.6 核心技术的进阶部分，主要解决前端开发中从“写页面”到“写工程”的跨越问题。很多转岗或自学的开发者能把基础的数据绑定和指令用得滚瓜烂熟，但一遇到多组件传值、页面切换动效卡顿、跨层级状态共享就抓瞎。这门课不带你复习基础语法，而是直接切入动画过渡、组件化架构、路由控制与状态管理四大块。如果你目前写 Vue 还是把所有逻辑堆在单个文件里，或者用各种父传子、子传父的笨办法去维护数据，那么这就是你需要查漏补缺的能力缺口。它适合已经掌握基础指令、生命周期和基本事件处理的学习者，如果你连实例创建和响应式原理都还没弄懂，建议先去补齐第一季和第二季再来啃这部分。

练习路线：从视觉反馈到工程拆分

拿到资料后，建议按照视觉表现到逻辑架构的顺序来推进。先看动画过渡模块，不要只跟着视频敲一遍 CSS 类名就完事，重点去理解过渡钩子函数的执行时机，自己尝试用 JavaScript 钩子结合第三方动画库去实现复杂的列表交错动画。接着进入组件化部分，这是重中之重，不要停留在全局和局部注册的表面概念，要死磕组件中的 Data 为什么必须是函数、父子组件如何通过 Props 和自定义事件通信、以及跨组件的 Bus 事件总线机制。路由和状态管理部分，重点放在嵌套路由的视图渲染、导航守卫的鉴权拦截，以及 Vuex 中 State、Mutations、Actions 的严格流转规范。资料里的员工信息管理模块更新案例是绝佳的练手场，不要光看，要把原码拆掉，自己重新实现一遍过渡效果追加和数据状态流转。

学完能独立做什么：看完应能回答的问题

跟着资料走完这套练习，你应该具备独立搭建中后台管理系统中复杂业务模块的能力，而不是只能写静态展示页。学完后，你需要能清晰回答以下几个问题：列表新增和删除元素时如何避免 DOM 抖动并实现平滑过渡？组件嵌套层级很深时，除了逐层传递 Props 还有什么更合理的通信方案？单页面应用中如何通过路由守卫拦截未授权用户的非法访问？什么时候必须把数据放进 Vuex，什么时候只需要在组件内部维护局部状态即可？如果这些问题你都能不假思索地给出方案并写出核心代码，说明这部分的核心技术你确实补到位了。资料配合练习的关键在于先理清每个生命周期和钩子的触发顺序，再动手写业务逻辑，遇到状态混乱时多画一画组件树的数据流向图，别盲目复制粘贴代码，缺哪块补哪块，别假装什么都会。

课程目录

1-1 [Vue的页面过渡动画效果] 使用css属性实现过渡 (25:23)
1-2 [Vue的页面过渡动画效果] 使用css动画实现过渡 (13:06)
1-3 [Vue的页面过渡动画效果] 修改过渡类名前缀 (02:58)
1-4 [Vue的页面过渡动画效果] 自定义过渡类名 (09:41)
1-5 [Vue的页面过渡动画效果] 使用钩子函数实现过渡 (35:33)
1-6 [Vue的页面过渡动画效果] 列表元素的过渡 (29:27)
1-7 [Vue的页面过渡动画效果] 员工信息管理模块更新-过渡效果追加 (19:36)
2-1 [组件化开发] 模块化与组件化 (08:53)
2-2 [组件化开发] 全局组件的注册 (26:12)
2-3 [组件化开发] 局部组件的注册 (08:07)
2-4 [组件化开发] 组件中的Data (16:37)
2-5 [组件化开发] 多组件之间的切换 (14:51)
2-6 [组件化开发] 组件切换的过渡 (08:47)
2-7 [组件化开发] 通过Prop向子组件传递数据 (29:08)
2-8 [组件化开发] 监听子组件事件 (17:02)
2-9 [组件化开发] 评论列表组件案例 (35:18)
2-10 [组件化开发] 访问子组件实例或子元素 (17:09)
3-1 [vue-router路由] 前端路由和后端路由的概念 (07:45)
3-2 [vue-router路由] vue-router使用说明 (08:13)
3-3 [vue-router路由] vue-router使用基本示例 (20:39)
3-4 [vue-router路由] 路由组件参传递 (07:42)
3-5 [vue-router路由] 嵌套路由的使用 (23:48)
4-1 [计算属性和侦听器] watch侦听器的使用 (14:36)
4-2 [计算属性和侦听器] computed计算属性的使用 (20:03)
5-1 [Webpack+Vue项目构建] render渲染函数 (14:26)
5-2 [Webpack+Vue项目构建] Webpack+Vue项目构建示例 (25:35)
5-3 [Webpack+Vue项目构建] Vue单文件组件的使用 (05:10)
5-4 [Webpack+Vue项目构建] 单文件组件中实例的导出 (25:32)
5-5 [Webpack+Vue项目构建] Webpack结合Vue-Router的使用 (15:39)
5-6 [Webpack+Vue项目构建] 嵌套路由children的实现 (10:23)
5-7 [Webpack+Vue项目构建] 路由模块的抽离 (05:34)
5-8 [Webpack+Vue项目构建] 单文件组件中Scoped CSS的使用 (06:39)
6-1 [移动端组件库] MintUI完整引入使用示例 (22:35)
6-2 [移动端组件库] MintUI按需引入使用示例 (11:17)
6-3 [移动端组件库] MUI使用示例 (09:20)
7-1 [Vuex集中式数据管理] Vuex基本概念 (20:40)
7-2 [Vuex集中式数据管理] Vuex使用基本示例 (20:18)