Le proprietà dei componenti di nidificazione sono mantenibili a lungo termine?

1

Sto costruendo componenti in Vue.js . Sembrano così:

<template>
  <form :schema="form.schema" :options="form.options"></form>
</template>

<script>
export default {
  data: () =>
    form: {
      schema: { // array containing form fields }
      options: {
        isHorizontal: true,
        hasLabels: false
      }
    }
  }
}
</script>

Come puoi vedere, sto annidando gli oggetti di scena. Potrei anche aver scritto il componente in questo modo:

<template>
  <form
    :schema="form.schema"
    :isHorizontal="form.isHorizontal"
    :hasLabels="form.hasLabels">
  </form>
</template>

<script>
export default {
  data: () =>
    form: {
      schema: { // array containing form fields },
      isHorizontal: true,
      hasLabels: false
    }
  }
}
</script>

Quale versione è più intuitiva per i principianti e mantenibile per i veterani?

    
posta alex 04.12.2016 - 08:16
fonte

1 risposta

2

La differenza fondamentale che vedo qui è chi controlla le opzioni.

Per il tuo primo esempio, "oggetti di scena annidati", il modello richiede solo una pila di opzioni. Il modello non ha conoscenze di ciò che sono. Nel tuo secondo esempio il template indica esplicitamente le opzioni che richiede. Il modello non conosce i loro valori ma sa esattamente quali opzioni si aspetta.

Non ho mai toccato Vue.js ma conosco abbastanza il design per sapere che non dovresti diffondere la conoscenza dei dettagli senza una buona ragione. È meglio che il codice non sappia se isHorizontal è un'opzione su questo componente se non è necessario.

Tuttavia, se ti trovi ad interagire per vedere se isHorizontal è un'opzione in un componente, sarebbe stato meglio assicurarti di sapere che sarebbe stato lì usando il modello come nella tua seconda versione.

Sto pensando al modello come un'interfaccia che promette ciò che troverò nel componente. Non promettermi ciò che non ho bisogno di vedere. Non chiedermi di approfondire quello che faccio.

    
risposta data 04.12.2016 - 17:53
fonte