Vue Tree 展平数组或递归组件

Question

大家好，我正在尝试在 Vue 中构建 Tree 组件，我现在有点怀疑我已经构建了一个递归组件，类似于这个，但更复杂的是复选框、拖放等

https://vuejs.org/v2/examples/tree-view.html

但现在我在网上查看一些示例，它们看起来是通过扁平化嵌套的 json 并从中制作一棵树来制作的

喜欢这个：

https://jsfiddle.net/fernando2684/p0k8szvj/43/

嗨，这里递归构建数组，然后用它构建树

   recursive(obj, newObj, level, itemId, isExpend) {
      let vm = this;

      obj.forEach(function(o) {
        if (o.children && o.children.length != 0) {
          o.level = level;
          o.leaf = false;
          newObj.push(o);
          if (o.id == itemId) {
            o.expend = isExpend;
          }
          if (o.expend == true) {
            vm.recursive(o.children, newObj, o.level + 1, itemId, isExpend);
          }
        } else {
          o.level = level;
          o.leaf = true;
          newObj.push(o);
          return false;
        }
      });
    },

有人能告诉我，这样做有什么真正的好处，我认为它可能更容易维护，并且数组中的所有数据都是反应性的，因为它只有一个级别？？？

Answer 1

这是优化模板中使用的数据的问题。

平面数组

如果您要渲染table，使用递归组件将难以实现。

如果你有一个数组，你可以通过v-for 传递它，你最终会得到一个单个组件，它的所有子元素（无论深度如何）都是直接子元素。这使得控制动作更容易。

嵌套对象

但如果你想使用 divs 递归缩进，那么使用平面数组就更难了。

如果您要使用对象，则必须使用 递归组件 以及它们各自需要冒泡的父子关系。

---

做哪个更适合你，但不要认为优化模板数据比创建更复杂的组件关系更糟糕。