javascript - Vue Tree压平数组或递归组件

Question

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

https://v2.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;
        }
      });
    },

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

Answer 1

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

平面数组

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

如果您有一个数组，则可以通过 v-for 传递它，最终得到一个包含所有子项的单个组件(无论深度如何) ) 作为直接子代。这使得控制 Action 变得更容易。

嵌套对象

但是，如果您想使用递归缩进的 div，那么使用平面数组会更加困难。

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

<小时/>

选择更适合您的方式，但不要认为优化模板数据比创建更复杂的组件关系更糟糕。