Vylepšení aplikace Vue.js. Několik praktických tipů

 

   (( item.name ))
 

...a uvidíme takovou chybu:

Můžeme se s tím vypořádat tak, že pomocí JSX a funkční komponenty, také bychom měli předat boolean a ten nahradí v-if.

Nepište obsluhy volání api v komponentách

Ve skutečnosti je to jen jeden z příkladů toho, co byste v komponentách neměli dělat. Jednoduše dělejte to, co je v logice komponent lokálně nutné. Každá metoda, která by mohla být externí, by měla být oddělena a volána pouze v komponentách, např. obchodní logika.

Příklad:

Místo této metody:

created() (
this.fetchArticles();
),
metody: (
 async fetchArticles() (
  try (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // zpracovat chybu
    )
  )
)

Napište něco takového - stačí zavolat příslušnou metodu, která vrátí výsledky API:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // zpracovat chybu
   )
  )

Místo velkého množství rekvizit používejte sloty.

Někdy je použití rekvizit dostačující, ale jsou i případy, kdy nejsou efektivní. Může se to stát v situacích, kdy bychom museli přidat příliš mnoho rekvizit, aby komponenta fungovala tak, jak chceme. Nejjednodušším příkladem může být komponenta tlačítka. Bezpochyby se jedná o komponentu, kterou lze použít kdekoli v aplikaci. Uvažujme tedy komponentu tlačítka, jako je tato.

(( text ))

V této fázi se jedná o jednoduchou komponentu, která přijímá pouze textové rekvizity. Dobře, ale to nemusí stačit, protože v tlačítku budeme potřebovat ikony. V tom případě musíme přidat další 2 rekvizity (2, protože chceme mít možnost přidat před nebo za text). Takže komponenta bude vypadat takto:

(( text ))

Není to špatné, máme jen 3 podpěry, ale...

Co když potřebujeme indikátor zatížení? To bychom museli přidat další rekvizitu. A to pro každou novou funkci! Zdá se vám nyní udržení kroku s růstem počtu komponent náročné? Ano, rozhodně ano!

Použijme místo toho sloty.

Jednodušší, že? Dobře, ale jak můžeme získat funkci přidání ikony? Je to opravdu snadné! Stačí použít komponentu takto:

Zpět

Další

Snadný způsob, jak zlepšit výkon

Podělím se s vámi o několik tipů, které jsou opravdu snadno proveditelné, takže z nich můžete okamžitě těžit.

Trasy líného načítání

Někdy jsou trasy dostupné pouze pro administrátory nebo uživatele s určitým přístupem, mohou být také navštěvovány méně než ostatní. To jsou ideální případy pro použití líného načítání trasy.

Pro vrácení importní funkce stačí použít funkci arrow ve vlastnosti komponenty:

 export default new VueRouter (
   (
     mode: 'history',
     routes: [
       (
         path: '/landing',
         component: () => import('../pages/p-welcome'),
         name: "welcome
       ),
  ...

Místo:

import PWelcome z '@/pages/p-welcome';

export default new VueRouter (
(
mode: 'history',
routes: [
(
path: '/landing',
component: PWelcome, //jen importovaná komponenta
name: "welcome
),

Líné načítání komponent Vue

Podobná situace může nastat u Součásti Vue. Takto můžeme líně importovat jednotlivé součásti souboru:

const lazyComponent = () => import('pathToComponent.vue')
export default (
components: (lazyComponent )
)

// Jiná syntaxe
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Díky línému načítání této komponenty se stáhne až po vyžádání. Například pokud máme komponentu s funkcí v-if, bude vyžádána pouze v případě, že se má komponenta vykreslit. Pokud tedy není hodnota v-if true, komponenta se nenačte. Proto lze líné importování použít také pro JavaScript soubory.

Bonus: Při použití rozhraní Vue CLI 3+ je každý líně načtený prostředek ve výchozím nastavení přednačten!

Používání průhledných obalů místo atributových rekvizit

Vezměme si komponentu, jako je tato:

Bez problémů ji můžeme použít takto:

nebo

Funguje to, protože Vue umožňuje předávat komponentě html atributy, i když jste je nedeklarovali jako rekvizity. Atributy html se použijí na kořenový prvek komponenty (v tomto případě input).

Problém nastane, když chceme rozšířit naši vstupní komponentu, protože by mohla vypadat takto:

<code> <template>
   <div class="form-group">
     <label :for="id">(( štítek ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

Nyní použijte komponentu tímto způsobem:

nebude fungovat tak, jak chceme, protože typ a zástupný znak budou použity na div (kořenový element), což nedává smysl. Musíme se s tím tedy vypořádat, protože chceme přidat naše atributy do vstupního prvku. Vaše první myšlenka může být "přidáme rekvizity, které potřebujeme!" a samozřejmě to bude fungovat, ale... co když chceme použít např. typ, automatické dokončování, zástupný symbol, automatické ostření, zakázané, vstupní režim, atd., pak musíme definovat rekvizity pro každý html atribut. Osobně se mi tento zdlouhavý způsob nelíbí, takže hledejme něco lepšího!

Celým problémem se můžeme zabývat v jen dva řádky.

<template>
  <div class="form-group">
    <label :for="id">(( štítek ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

Můžeme použít v-bind="$attrs" a předávat atributy přímo aniž byste museli deklarovat obrovské množství rekvizit. Nezapomeňte také na přidání možnosti inheritAttrs: false zakázat předávání atributů kořenovému prvku. Pojďme ještě o kousek dál: co když potřebujeme k tomuto vstupu přidat posluchače událostí? Opět by se to dalo řešit pomocí rekvizit nebo vlastních událostí, ale existuje lepší řešení.

<template>
  <div class="form-group">
    <label :for="id">(( štítek ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

Je zde nová vypočtená vlastnost, která vrací komponentu pro posluchače a přidává posluchače vstupu. Tento vypočtený vstup použijeme tak, že jednoduše napíšeme v-on="posluchači".

Použití watcheru s možností okamžitě místo vytvořeného háčku a watcheru dohromady

Často načítáme nějaká data na vytvořeném (nebo připojeném) háčku, ale pak potřebujeme tato data načítat při každé změně vlastnosti, např. aktuální stránky stránkování. Někteří mají tendenci to zapisovat takto:

Samozřejmě to funguje, ale... Není to nejlepší přístup, dokonce ani dobrý. Podívejme se tedy, jak to můžeme refaktorovat, Příklad ne tak špatného přístupu:

Výše uvedená verze je lepší, protože další metoda není nutná, pouze jsme pojmenovali metodu, která má být volána pro změnu watchedProperty.

Ještě lepší přístup:

Zbavili jsme se vytvořeného háčku. Přidáním volby "immediate" způsobíme, že tato komponenta zavolá metodu fetchData ihned po začátku pozorování (je kousek před háčkem created a za beforeCreated), takže ji lze použít místo háčku created.

Vue.js tipy shrnutí

Tyto tipy nezajistí, že vaše aplikace bude dokonalá, ale jejich použití vám pomůže rychle. zlepšit kvalitu svého kódu. Také doufám, že ve výše uvedených příkladech najdete něco zajímavého.

Všimněte si, že některé z nich byly pro účely článku zjednodušeny.

Přečtěte si více:

JavaScript je zcela mrtvý. Nějaký chlápek na internetu

Hlubší pohled na nejoblíbenější háčky React

Softwarové projekty, kde můžete použít JavaScript