Vue Массив дерева или рекурсивный компонент

Question

Привет, ребята, я пытаюсь построить компонент дерева в Vue, у меня есть небольшое сомнение, теперь я уже создал рекурсивный компонент, похожий на этот, но более сложный с флажками, drag drop et c

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 с рекурсивным отступом, тогда использовать плоский массив будет сложнее.

Если вы будете использовать объекты, вы пришлось бы использовать рекурсивные компоненты с их индивидуальными родительско-дочерними отношениями, которые должны всплывать.

---

Делать то, что вам больше подходит, но не думайте, оптимизируя данные для шаблона хуже, чем создание более сложных отношений компонентов.