本文主要展示一下4种树形组件基于 Vue2 和 Ant Design Vue 1.x 的一般的“实现效果”，和分析它们大致的“实现思路、经验”。【后文有图示】

一种基于 Vue 和 Ant Design Vue / Element-ui 实现的，树形表格组件。这一种组件用于选择多层级树状数据中的多个节点。同时在各行各业后管需求中比较普遍常见。【后文有图示】

Vue2源码系列终于要完结了。最后总结一下阅读过程中的一些收获，主要分为4个方面：

“架构设计方面”、“目录和模块设计”、“编程具体模块的实现”、“怎么看源码”

“指令”这部分源码，也容易看得晕头转向，这部分代码贯穿了整个核心流程，是没有独立出来的。而常见的指令v-bind、v-on、v-model、v-if v-show等等都是通过这套机制来实现的。

这篇文章干货不多，主要是再对前面已经讲过原理的各种指令的实现有一个宏观的认识。

keep-alive是vue的内置组件，如果是用户想要自己实现一个类似keep-alive的组件是不可能的，因为需要vue的主干逻辑配合该组件的实现。

keep-alive的作用是缓存的是子组件的vnode，而其本身的render返回的也是vnode。

keep-alive的原理依赖slot的机制。

对于同一个组件实例，其 vnode 其实包括其“占位符节点”和“真实节点”，它们是父子节点关系。基于这点知识，再去理解slot等机制并不难。

然后再解释了一下为什么slot和slotScope之流为什么不是响应式的。已经再介绍一下vue3正式登场的v-slot。

v-model相关的源码，其实极其复杂。这里主要用文本来概括流程，并且挖掘一些特别的点。

可以划分为“v-model 在控件的实现”和“v-model 在自定义组件的实现”两部分。

event即事件系统，这部分源码让人看得头皮发麻。但是理解之后发现这部分的逻辑是很重要的，在这里试着用几句话概括流程。

事件系统分为“DOM 事件”和“自定义事件”，分别为两套处理流程，先有个大概的印象即可。

Proxy，与其说是代理，还不如说代理是基于拦截的，在功能定位上，和defineProperty是不一样的。只是恰好Proxy覆盖了defineProperty的getter和setter两个api。

经过对概念的区分，我认为：数据代理，其原理是数据劫持。数据代理的原理是最简单的。