Vue Tree展平数组或递归组件

Question

伙计们，我正在尝试在Vue中构建Tree组件，现在我已经有点疑问，我已经构建了一个类似于此组件的递归组件，但是具有复选框，拖放等更复杂的功能。

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

但是现在我正在在线查看一些示例，这些示例的外观是通过将嵌套的json展平并从中制成一棵树

喜欢这个：

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

您好，这里递归构建数组，然后从中构建Tree

   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，则使用平面数组会更加困难。

如果要使用对象，则必须将递归组件与需要冒泡的各个父子关系一起使用。

---

执行更适合您的操作，但不要认为为模板优化数据比创建更复杂的组件关系更糟糕。