这到底是在解决什么工作场景
很多做前端开发的人，平时用现成的 Vue 组件库很顺，但一遇到复杂业务需要深度定制树形控件时，就卡壳了。比如要在层级节点里加自定义交互、改渲染逻辑，或者处理大批量嵌套数据的性能问题，直接改第三方库往往牵一发而动全身。这门课聚焦的正是这个痛点：带你从零手写一个 Tree 组件，把底层的数据扁平化处理、节点类型定义、tsx 渲染逻辑彻底拆解清楚。它不是教你如何调接口配参数，而是教你搞懂复杂组件的内部运转机制，让你以后遇到任何定制化需求，都有能力自己造轮子或者深度改造现有轮子。
适合什么基础与学习路线建议
这套资料不适合刚看完 Vue 基础语法的新手。你需要对组合式 API 有基本了解，平时写过简单的业务组件。如果你属于“能用但讲不清原理”的前端，这课正好补齐你的底层短板。建议先看节点类型定义和用 reduce 处理嵌套结构扁平化的部分，这是整个 Tree 组件的地基。理解了数据怎么从嵌套拍平、再用工具做测试验证之后，再进入组件主体开发。不要跳过中间用测试工具校验函数的环节，很多实战项目垮掉就是因为底层数据处理没验证就直接画页面了。带着业务里真实遇到过的树形数据结构去对照看，吸收会更快。
学完能独立做什么及资料配合方法
跟着走完这套流程，你能独立产出一个支持基本层级展示、带父节点前置操作按钮的 Tree 组件，并且能把它规范地挂到 VitePress 里写示例文档。更重要的是，你掌握了复杂组件的工程化研发思路：从类型约束、数据结构转换、单元测试到渲染层实现。配合资料练习时，务必自己建一个本地工程同步敲代码。视频里讲到 tsx 模板渲染和操作按钮时，先暂停，自己尝试写事件传递和状态联动，写不出来再回头看视频逻辑。不要只跟着抄一遍代码就完事，试着把扁平化函数单独抽出来，换成你自己业务里的深层级 JSON 数据跑一下，如果树状结构能正确渲染出来，才算真正把这门课的技术吃透了。
充分综合运用Vue3组件研发的技术栈，逐步迭代实现一个功能强大的Tree组件
课程目录
* 01 tree组件节点类型定义.mp4 (20.60 MB), 07:41
* 02 用reduce函数实现嵌套结构的扁平化（上）.mp4 (59.13 MB), 18:35
* 03 用reduce函数实现嵌套结构的扁平化（下）.mp4 (26.44 MB), 07:41
* 04 vite-node工具测试树结构扁平化函数.mp4 (43.83 MB), 10:31
* 05 tree组件基本开发（1）.mp4 (38.24 MB), 11:28
* 06 tree组件开发（2）- 编写VitePress示例.mp4 (44.67 MB), 11:23
* 07 编写tsx模板实现树结构渲染.mp4 (25.48 MB), 07:40
* 08 tsx模板中实现父节点前操作按钮.mp4 (25.97 MB), 06:43
* 09 计算属性初步实现Tree组件展开折叠.mp4 (51.71 MB), 14:03
* 10 巧用拍平函数递归结果修复折叠跳过的节点数量问题.mp4 (19.76 MB), 05:07
* 11 visible计算属性实现tree展开折叠.mp4 (71.27 MB), 19:44
* 12 实现扁平化树节点的index计算属性.mp4 (68.50 MB), 18:03
* 13 tree参照线计算属性实现.mp4 (47.75 MB), 14:12
* 14 tree参照线模板内容实现与测试.mp4 (62.71 MB), 15:18
* 15 tree组件节点折叠展开vue过渡动画实现.mp4 (48.75 MB), 11:19
* 16 参照线折叠展开vue动画实现.mp4 (37.78 MB), 09:16
* 17 引入字体图标iconfont的js文件.mp4 (42.97 MB), 10:14
* 18 开发字体图标SvgIcon组件.mp4 (33.34 MB), 10:44
* 19 vitepress中实现自定义字体图标库示例.mp4 (40.03 MB), 12:34
* 20 Tree组件折叠展开字体图标应用.mp4 (33.59 MB), 09:05
* 21 开发slot特性实现自定义节点图标和操作插槽.mp4 (69.05 MB), 19:44
* 22 完善树组件自定义插槽vitepress文档.mp4 (29.06 MB), 05:44
* 23 恢复expandedTree计算属性实现length计算属性.mp4 (70.50 MB), 16:08
* 24 扁平化Tree组件的分页功能开发（上）.mp4 (38.21 MB), 10:29
* 25 扁平化Tree组件的分页功能开发（下）.mp4 (27.22 MB), 07:45
* 26 完成vitepress树组件分页使用示例.mp4 (70.49 MB), 15:50
* 27 修复JuanButton无法双向绑定disabled属性问题.mp4 (14.81 MB), 03:33
* 28 新增一级节点api实现.mp4 (50.12 MB), 12:02
* 29 新增子节点api实现.mp4 (60.08 MB), 13:48
* 30 Vitepress文档演示已实现的JuanTree功能API.mp4 (26.72 MB), 05:50
* 31 节点删除api实现（支持异步操作）.mp4 (44.76 MB), 11:06
