Proč používat syntaxi objektu Vues v-on?

Kódování je subjektivní, vždy je možné dělat věci několika různými způsoby. Rámce jsou obvykle názorové a existují určité konvence a některé formy jsou běžněji přijímány než jiné. Zde vám představuji způsob, jakým rád strukturuji své události ve Vue, a zdůvodnění za tím.

Jsem velkým fanouškem statického psaní a pevně věřím, že to může pomoci k příjemnějšímu zážitku z vývoje, nebudu se hádat, jestli je kód robustnější nebo ne, protože důvod, proč se mi opravdu líbí, je ten, že mi pomáhá vyhnout se překvapením a snadno tvarovat abstrakci kódu, obě věci souvisí s příjemným zážitkem z kódování, protože tím často strávím docela dobrý čas. Tato myšlenka může být lépe implementována pomocí strojového skriptu, ale považuji ji za stejně užitečnou s prostým javascriptem.

Místo použití řetězců pro události a poté @ zkratková notace pro posluchače. Doporučuji vytvořit objekt nebo výčet a mít tam všechny události jako slovník, pak vytvořit další objekt, který má hodnoty slovníku jako klíče a posluchače jako hodnotu. Nevýhodou je, že je o něco podrobnější než použití @event , ale s rostoucím počtem událostí a posluchačů je to méně zřejmé.

V dokumentech Vue se objevuje pod Object Syntax pro v-on v sekci API. V kódu by to bylo:

<template>
  <some-vue-component
    v-on="someVueComponentListeners"
  />
</template>
<script>
  // This should be part of SomeVueComponent SFC
  const SomeVueComponentEvents = {
    CLICK: 'click',
    CUSTOM_EVENT: 'custom-event'
  };
  // We assume somewhere inside of it there is a:
  // this.$emit(SomeVueComponentEvents.CLICK);
  // this.$emit(SomeVueComponentEvents.CUSTOM_EVENT);
  const someVueComponentListeners = {
    [SomeVueComponentEvents.CLICK]: () => { /* do something */},
    [SomeVueComponentEvents.CUSTOM_EVENT]: () => { /* do something */},
  };
</script>

Konzistentní vyhledávání

První výhodou tohoto způsobu zpracování událostí je, že bude velmi snadné vyhledávat, emitor i posluchač mají stejné Object.Key notace.

Přesunout logiku do sekce skript

Veškerá vaše logika bude k dispozici v sekci skriptů SFC, pravděpodobně budete stále muset šablonu čas od času zkontrolovat, ale nyní nemusíte chodit do šablony, abyste viděli, který obslužný program odpovídá které události.

Výstižnější šablony

V důsledku předchozího bodu je značka komponenty nyní přehledná, což je zvláště viditelné u komponent kontejneru s mnoha handlery. Nyní již ze šablony nemůžete vědět, které obslužné rutiny jsou implementovány (v závislosti na IDE, které používáte, to můžete vidět, přičemž tyto informace poskytuje VS Code IntelliSense).

Děkuji za přečtení, rád si přečtu vaše názory a komentáře. Pokud vás tento příspěvek zaujal, zvažte, zda mě můžete sledovat zde nebo na Twitteru.