说明：以下基于elementUI@2.13.1。

学习elementUI源码前务必通过其官网熟悉其用法，包括props、事件、ref方法和dom结构等。
el-tree代码总共有1635行。

ElTree

1. dom结构层次，render、slot和普通方式

• 通过入口tree.vue文件，了解到，模板生成这块，主要是通过tree-node.vue来生成树形dom结构：

<div
    class="el-tree"
    :class="{
      'el-tree--highlight-current': highlightCurrent,
      'is-dragging': !!dragState.draggingNode,
      'is-drop-not-allow': !dragState.allowDrop,
      'is-drop-inner': dragState.dropType === 'inner'
    }"
    role="tree"
  >
    <el-tree-node
      v-for="child in root.childNodes"
      :node="child"
      :props="props"
      :render-after-expand="renderAfterExpand"
      :show-checkbox="showCheckbox"
      :key="getNodeKey(child)"
      :render-content="renderContent"
      @node-expand="handleNodeExpand">
    </el-tree-node>
    <div class="el-tree__empty-block" v-if="isEmpty">
      <span class="el-tree__empty-text">{{ emptyText }}</span>
    </div>
    <div
      v-show="dragState.showDropIndicator"
      class="el-tree__drop-indicator"
      ref="dropIndicator">
    </div>
</div>

• dom结构

  
  dom结构
• 除了默认方式，节点内容还支持jsx和slot两种：

<node-content :node="node"></node-content>

// node-content组件
components: {
      NodeContent: {
        props: {
          node: {
            required: true
          }
        },
        render(h) {
          const parent = this.$parent;
          const tree = parent.tree;
          const node = this.node;
          const { data, store } = node;
          return (
            parent.renderContent
              ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
              : tree.$scopedSlots.default
                ? tree.$scopedSlots.default({ node, data })
                : <span class="el-tree-node__label">{ node.label }</span>
          );
        }
    }
}

2. TreeStore Class：内部通过Node Class维护了一份树形结构

在elTreede 入口vue文件tree.vue中，会通过TreeStore Class生成store对象：

this.store = new TreeStore({
        key: this.nodeKey,
        data: this.data,
        lazy: this.lazy,
        props: this.props,
        load: this.load,
        currentNodeKey: this.currentNodeKey,
        checkStrictly: this.checkStrictly,
        checkDescendants: this.checkDescendants,
        defaultCheckedKeys: this.defaultCheckedKeys,
        defaultExpandedKeys: this.defaultExpandedKeys,
        autoExpandParent: this.autoExpandParent,
        defaultExpandAll: this.defaultExpandAll,
        filterNodeMethod: this.filterNodeMethod
});

主要有以下作用：

• tree-store的实例store会根据节点数据初始化节点，生成node，见下一节“节点初始化过程”；

this.root = new Node({ // this.root保存着根节点信息
      data: this.data,
      store: this
});

• tree-store中nodeMap对象以{key: node}形式保存node；
• 在下一节中我们会了解到，当设置了lazy懒加载，那么就不会遍历子节点数据进行初始化，所以需要在tree-store的最后调用load回调，遍历子节点数据进行初始化，递归地方式将所有节点初始化。

if (this.lazy && this.load) {
      const loadFn = this.load;
      loadFn(this.root, (data) => {
        this.root.doCreateChildren(data);
        this._initDefaultCheckedNodes();
      });
    } else {
      this._initDefaultCheckedNodes();
    }

• 根据prop defaultCheckedKeys（默认勾选的节点的 key 的数组）来设置各级节点的选中状态。

3. 节点初始化过程（Node Class实例化）

节点初始化用到Node Class来实例化，是一个递归的过程，会根据节点数据及其后代数据逐步用Node Class封装，其主要作用是封装每层节点的各种状态和各种操作，在此处用Class是非常适合的；其初始化主要过程有：

• 将node以{key: node}形式注册到store中的nodeMap对象；
• 通过level属性来设置不能节点的层级；
• 通过childNodes来保存子节点Node Class实例，而在对应的节点数据中是用children（也可以自定义）来保存子节点数据;
• 实例中通过data来保存原始的数据；
• 通过checked和indeterminate来设置选中状态，通过expanded和visible来设置展开和可见状态，通过isCurrent来设置是否是选中节点，通过loading和loaded来设置加载状态；
• 根据el-tree的props属性中的isLeaf，设置node的isLeafByUser属性；
• 根据defaultExpandAll，设置节点expanded;
• 通过setData方法，遍历children，生成Node实例，插入到node的childNodes中；
  详细流程见下图：
  节点初始化
  lazy加载示例：

<el-tree
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

<script>
loadNode(node, resolve) {
  resolve([{id: 1}]) // 在内部会将数组中的元素用Node实例化，并注入到当前节点node的childNodes中
}
</script>

相关源码：

loadData(callback, defaultProps = {}) {
    if (this.store.lazy === true && this.store.load && !this.loaded && (!this.loading || Object.keys(defaultProps).length)) {
      this.loading = true;

      const resolve = (children) => {
        this.loaded = true;
        this.loading = false;
        this.childNodes = [];

        this.doCreateChildren(children, defaultProps); // 将reslove入参children分别用Node实例化并插入到当前节点的node

        this.updateLeafState(); // 更新节点叶子状态
        if (callback) {
          callback.call(this, children);
        }
      };

      this.store.load(this, resolve); // 上例中loadNode方法赋给了此处的load方法
    } else {
      if (callback) {
        callback.call(this);
      }
    }
  }

Node Class还有诸如insertBefore、insertAfter、expand和collapse等操作，后面涉及到再介绍。

4. 事件机制与拖拽

在官方网站上，tree组件对外暴露了13个事件，其中6个是跟拖拽有关。
4.1 在tree-node.vue文件中会看到，tree-node组件根节点上绑定了click事件和contextmenu事件：

click
contextmenu事件会触发node-contextmenu事件；
click方法会触发可能多达6种事件：

// tree-node.vue
handleClick() {
        const store = this.tree.store;
        store.setCurrentNode(this.node);
        this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode);
        this.tree.currentNode = this;
        if (this.tree.expandOnClickNode) {
          this.handleExpandIconClick();
        }
        if (this.tree.checkOnClickNode && !this.node.disabled) {
          this.handleCheckChange(null, {
            target: { checked: !this.node.checked }
          });
        }
        this.tree.$emit('node-click', this.node.data, this.node, this);
}

如上所见：

• 在开始和结束时，分别触发current-change和node-click事件；
• 当prop expandOnClickNode（是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点）为true时，会调用handleExpandIconClick触发node-collapse或node-expand事件：

// tree-node.vue
handleExpandIconClick() {
        if (this.node.isLeaf) return;
        if (this.expanded) {
          this.tree.$emit('node-collapse', this.node.data, this.node, this);
          this.node.collapse(); // 会设置当前node实例的expanded为false，导致一些class生效，子节点隐藏
        } else {
          this.node.expand(); // 会设置当前node实例的expanded为true，触发动态加载子节点回调并设置当前节点和这些动态子节点的选中状态等
          this.$emit('node-expand', this.node.data, this.node, this);
        }
}

其中，
this.node.collapse()会设置当前node实例的expanded为false，导致一些class生效，子节点隐藏；
this.node.expand()会设置当前node实例的expanded为true，触发动态加载子节点回调并设置当前节点和这些动态子节点的选中状态等；
当这些状态性的标识（如半选状态、勾选状态和展开状态，设置了watcher）变化时会触发check-change事件；

• 当prop checkOnClickNode（是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点）为true，会调用handleCheckChange触发check事件：

// tree-node.vue
handleCheckChange(value, ev) {
        this.node.setChecked(ev.target.checked, !this.tree.checkStrictly); // 设置选中状态，如勾选、半选
        this.$nextTick(() => {
          const store = this.tree.store;
          this.tree.$emit('check', this.node.data, {
            checkedNodes: store.getCheckedNodes(), // 目前被选中的节点所组成的数组
            checkedKeys: store.getCheckedKeys(), // 目前被选中的节点的 key 所组成的数组
            halfCheckedNodes: store.getHalfCheckedNodes(), // 目前半选中的节点所组成的数组
            halfCheckedKeys: store.getHalfCheckedKeys(), // 目前半选中的节点的 key 所组成的数组
          });
        });
}

• 拖拽及相关的事件
  当prop draggable设置成true后，节点可拖拽，接着绑定了四种事件：dragstart、dragover、dragend和drop。

// tree-node.vue
<div
    class="el-tree-node"
    @click.stop="handleClick"
    @contextmenu="($event) => this.handleContextMenu($event)"
    ......
    :draggable="tree.draggable"
    @dragstart.stop="handleDragStart"
    @dragover.stop="handleDragOver"
    @dragend.stop="handleDragEnd"
    @drop.stop="handleDrop"
    ref="node"
>

四个事件对应的回调：

// tree-node.vue
      handleDragStart(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-start', event, this);
      },

      handleDragOver(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-over', event, this);
        event.preventDefault();
      },

      handleDrop(event) {
        event.preventDefault();
      },

      handleDragEnd(event) {
        if (!this.tree.draggable) return;
        this.tree.$emit('tree-node-drag-end', event, this);
      }

其中，this.tree是当前实例的父节点实例，父节点实例（tree.vue文件中）有对应的监控方法：

// tree.vue
// 响应tree-node-drag-start事件
this.$on('tree-node-drag-start', (event, treeNode) => { 
        if (typeof this.allowDrag === 'function' && !this.allowDrag(treeNode.node)) {
          event.preventDefault();
          return false;
        }
        event.dataTransfer.effectAllowed = 'move';
        ......
        dragState.draggingNode = treeNode;
        this.$emit('node-drag-start', treeNode.node, event); // 触发node-drag-start事件
})

// tree.vue
// 响应tree-node-drag-over事件
this.$on('tree-node-drag-over', (event, treeNode) => {
       ......
        event.dataTransfer.dropEffect = dropInner ? 'move' : 'none';
        if ((dropPrev || dropInner || dropNext) && oldDropNode !== dropNode) {
          if (oldDropNode) {
            this.$emit('node-drag-leave', draggingNode.node, oldDropNode.node, event); // 触发node-drag-leave事件
          }
          this.$emit('node-drag-enter', draggingNode.node, dropNode.node, event); // 触发node-drag-enter事件
        }

        if (dropPrev || dropInner || dropNext) {
          dragState.dropNode = dropNode;
        }
       ......
        dragState.showDropIndicator = dropType === 'before' || dropType === 'after';
        dragState.allowDrop = dragState.showDropIndicator || userAllowDropInner;
        dragState.dropType = dropType;
        this.$emit('node-drag-over', draggingNode.node, dropNode.node, event); // 触发node-drag-over事件
})

// tree.vue
// 响应tree-node-drag-end事件
this.$on('tree-node-drag-end', (event) => {
         ......
          this.$emit('node-drag-end', draggingNode.node, dropNode.node, dropType, event); // 触发node-drag-end事件
          if (dropType !== 'none') {
            this.$emit('node-drop', draggingNode.node, dropNode.node, dropType, event); // 触发node-drop事件
          }
        }
        if (draggingNode && !dropNode) {
          this.$emit('node-drag-end', draggingNode.node, null, dropType, event); // 触发node-drag-end事件
        }
        ......
})

DataTransfer参考：DataTransfer
这块代码精巧，需要理解对可拖拽元素及响应事件，结合Node Class中insertBefore、insertAfter和insertChild方法，实现数据的交换。

• 方向键操作
  在tree.vue的mounted方法里，注册了keydown事件，使得：
  1.通过上下键可以选中节点
  2.左键实现收缩效果
  3.通过右键实现展开效果
  4.通过enter或space键实现多选框的选中/取消

// tree.vue
// keydown事件
handleKeydown(ev) {
        const currentItem = ev.target;
        if (currentItem.className.indexOf('el-tree-node') === -1) return;
        const keyCode = ev.keyCode;
        this.treeItems = this.$el.querySelectorAll('.is-focusable[role=treeitem]');
        const currentIndex = this.treeItemArray.indexOf(currentItem);
        let nextIndex;
        if ([38, 40].indexOf(keyCode) > -1) { // up、down
          ev.preventDefault();
          if (keyCode === 38) { // up
            nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
          } else {
            nextIndex = (currentIndex < this.treeItemArray.length - 1) ? currentIndex + 1 : 0;
          }
          this.treeItemArray[nextIndex].focus(); // 选中
        }
        if ([37, 39].indexOf(keyCode) > -1) { // left、right 展开
          ev.preventDefault();
          currentItem.click(); // 选中
        }
        const hasInput = currentItem.querySelector('[type="checkbox"]');
        if ([13, 32].indexOf(keyCode) > -1 && hasInput) { // space enter选中checkbox
          ev.preventDefault();
          hasInput.click();
        }
}

5. ref方法

在tree.vue中对外以ref形式提供了18种方法进行丰富地操作。再次摆上下图：

ElTree
ElTree以ref方式对外暴露的各种方法都在tree.vue中，而tree.vue都是调用的tree-store实例的对应方法。
在此不一一介绍了，以两个方法为例结束本篇。

• getCheckedNodes

看下用法：

方法名	说明	参数
getCheckedNodes	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组	(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false

源码：

// tree-store.js
getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
    const checkedNodes = [];
    const traverse = function(node) {
      const childNodes = node.root ? node.root.childNodes : node.childNodes;

      childNodes.forEach((child) => {
        if ((child.checked || (includeHalfChecked && child.indeterminate)) && (!leafOnly || (leafOnly && child.isLeaf))) {
          checkedNodes.push(child.data);
        }

        traverse(child);
      });
    };

    traverse(this);

    return checkedNodes;
}

主要是一个递归的过程，将每层符合条件的节点保存返回。其中node.root为真表示是根节点实例，每个节点实例的子元素保存在childNodes中。

• insertAfter

看下用法：

方法名	说明	参数
insertAfter	为 Tree 的一个节点的后面增加一个节点	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node

源码：

// tree-store.js
getNode(data) {
    if (data instanceof Node) return data;
    const key = typeof data !== 'object' ? data : getNodeKey(this.key, data);
    return this.nodesMap[key] || null;
}

insertAfter(data, refData) {
    const refNode = this.getNode(refData);
    refNode.parent.insertAfter({ data }, refNode);
}

// node.js
insertAfter(child, ref) {
    let index;
    if (ref) {
      index = this.childNodes.indexOf(ref);
      if (index !== -1) index += 1;
    }
    this.insertChild(child, index); // 更新数据的children信息，和实例的childNodes信息
}

getNode方法：
如果本身refData本身就是Node实例，那么直接返回该实例；
否则，通过nodesMap（treeStore实例维护的变量，用来保存Node实例）和key值获取对应的Node实例。
insertAfter方法：
refNode.parent获取的是父节点实例，没有Node实例都有parent属性，用来指向父实例。
insertAfter目的是更新数据的children信息，和Node实例的childNodes信息。