🔥 Tipy Vue #29:Rámec švů komponent:Snadný způsob, jak rozdělit komponenty

Tento zpravodaj byl odeslán do mého seznamu 6. října 2021. Přihlaste se zde a budete dostávat podobné e-maily každý týden!

Ahoj,

Máte rádi horkou omáčku?

No, zkusil jsem si nějaké vyrobit minulý týden a bylo to naprosté selhání. Takže zůstanu u pečení chleba.

A pokud nemáte rádi pálivou omáčku, možná si místo toho užijete tyto pálivé tipy.

— Michael

🔥 v-pre a v-once

Pokud máte velké kusy statického nebo převážně statického obsahu, můžete říct Vue, aby to ignorovalo pomocí v-pre nebo v-once směrnice:

<template>
  <!-- These elements never change -->
  <div v-pre>
    <h1 class="text-center">Bananas for sale 🍌</h1>
    <p>
      Come get this wonderful fruit!
    </p>
    <p>
      Our bananas are always the same price — $1 each!
    </p>

    <div class="rounded p-4 bg-yellow-200 text-black">
      <h2>
        Number of bananas in stock: as many as you need
      </h2>
      <p>
        That's right, we never run out of bananas!
      </p>
    </div>

    <p>
      Some people might say that we're... bananas about bananas!
    </p>
  </div>
</template>

To mohou být užitečné optimalizace výkonu, pokud je potřebujete.

S v-pre Vue bude s prvkem a jeho dětmi zacházet jako se statickým HTML a nebude na něm provádět žádná kouzla. v-once direktiva říká Vue, aby to jednou vyhodnotil a pak už nikdy neaktualizoval.

Zde jsou dokumenty pro v-pre a v-once.

🔥 Component Seams Framework:Snadný způsob rozdělení komponent

Zde je technika pro rozdělení komponent:

Kód, který píšete, tvoří přirozené skupiny. Chcete identifikovat tyto skupiny a spoje, které mezi nimi probíhají.

Jakmile to uděláte, je snadné extrahovat komponenty – tím, že budete věci co nejvíce uchovávat v jejich přirozených skupinách.

Component Seams Framework vám s tím pomůže v pouhých třech krocích:

1. Najděte švy — naleznete je ve vaší šabloně vyhledáním opakovaných sekcí a také sekce, které provádějí různé úkoly . Můžete je také najít ve svých rekvizitách, stavu a vypočítaných rekvizitách, když budete hledat věci, které souvisí a jsou často aktualizovány společně .
2. Naskládejte švy – vezměte všechny švy, které jste našli, zarovnejte je a uvidíte, kde souhlasí (a kde ne).
3. Rozdělit podél švů — kus po kousku věci vytáhneme a pak vymyslíme, co dělat s jeho závislostmi. Buď zahrňte závislost v nové komponentě nebo jej předejte do nové komponenty nějak (prop, slot nebo událost).

Pokud se chcete dozvědět více, tato metoda je podrobněji popsána v části Clean Components.

📜 25 Vue tipů, které potřebujete vědět

Letos jsem pro vás zatím sepsal 58 tipů Vue.

To jsou 2 každý týden po dobu 29 týdnů (od 22. března).

25 z nich jsem pro vás dal dohromady v tomto jediném článku (což je jeden z nejlepších příspěvků Vue všech dob na DEV.to).

Přečtěte si to hned:25 tipů Vue, které potřebujete vědět

🗞 Nuxt 3 je týden nux!

Přichází 12. října.

Bude to obrovské a nemůžu se dočkat, až to vyzkouším:

• Vue 3
• Vite
• Psopis
• a mnoho dalších funkcí

Zjistěte více o tom, co přichází s Nuxt 3.

💬 Skutečný problém

Někdy je problém odhalit, v čem je problém. — Gordon Glegg

Promarnil jsem tolik svého života snahou řešit věci, které ve skutečnosti nebyly problémy.

Nyní se snažím ujistit, že to, co považuji za problém, je skutečný problém.

Šetří mi to tolik času a úsilí.

🧠 Opakování s mezerami:Zvládněte vypočítané rekvizity

Nejlepší způsob, jak si něco uložit do dlouhodobé paměti, je pravidelně si to prohlížet a postupně prodlužovat dobu mezi recenzemi 👨‍🔬

Ve skutečnosti je zapamatování si těchto tipů mnohem užitečnější než jen rychlé rozptýlení, takže zde je tip z doby před několika týdny, který vám pomůže procvičit si paměť.

Když funkce dělá více než jen vrací hodnotu, dělá váš kód složitějším.

Říká se jim vedlejší účinky a nikdy byste je neměli mít uvnitř počítané rekvizity:

export default {
  computed: {
    fullName() {
      this.fetchUserInformation();  // Side effect
      return `${this.firstName} ${this.lastName}`;
    },
  },
};

Oprava tohoto je však poměrně jednoduchá. Můžeme jen přesunout tento vedlejší efekt do hlídače, který se spustí vždy, když se aktualizuje vypočítaná podpěra:

export default {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },

  watch: {
    fullName() {
      this.fetchUserInformation();  // Side effect
    },
  },
};

To platí stejně pro rozhraní API kompozice, i když syntaxe se mírně liší.

Na první pohled se může zdát, že jsme kód zkomplikovali. Ale ve skutečnosti jsme to udělali mnohem jednodušší.

Tento koncept je rozšířen v mém kurzu Clean Components.

Exkluzivní tipy a postřehy každý týden

Připojte se k 8335 dalším vývojářům Vue a získejte exkluzivní tipy a postřehy, jako jsou tyto, doručované přímo do vaší schránky, každý týden.

Zaregistrujte se zde