Vue.js lietotnes uzlabojumi. Daži praktiski padomi

 

   ((( item.name ))
 

...un mēs redzēsim šādu kļūdu:

Mēs varam to risināt, izmantojot izmantojot JSX un funkcionālo komponentu, arī mums vajadzētu nodot boolean un tas aizstās v-if.

Komponentos nerakstiet api izsaukumu apstrādātājus

Patiesībā šis ir tikai viens no piemēriem, ko nevajadzētu darīt komponentos. Vienkārši dariet to, kas ir lokāli nepieciešams komponentu loģikā. Katra metode, kas varētu būt ārēja, būtu jānodala un jāizsauc tikai komponentēs, piemēram, biznesa loģikā.

Piemērs:

Šādas metodes vietā:

izveidots() (
this.fetchArticles();
),
metodes: (
 async fetchArticles() (
  try (
    const dati = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // apstrādā kļūdu
    )
  )
)

Uzrakstiet kaut ko līdzīgu - vienkārši izsauciet atbilstošo metodi, kas atgriezīs API rezultātus:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // apstrādā kļūdu
   )
  )

Liela daudzuma rekvizītu vietā izmantojiet spēļu automātus.

Dažreiz pietiek ar balstu izmantošanu, bet ir arī gadījumi, kad tie nav efektīvi. Tas var notikt situācijās, kad mums būtu jāpievieno pārāk daudz rekvizītu, lai komponents darbotos tā, kā mēs vēlamies. Vienkāršākais piemērs varētu būt pogas komponents. Bez šaubām, tā ir komponente, ko var izmantot jebkurā lietojumprogrammas vietā. Aplūkosim šādu pogas komponentu.

((( teksts ))

Šajā posmā tas ir vienkāršs komponents, kas pieņem tikai teksta rekvizītu. Labi, bet ar to var nepietikt, jo mums pogā būs vajadzīgas ikonas. Šajā gadījumā mums jāpievieno vēl 2 rekvizīti (2, jo vēlamies, lai mums būtu iespēja pievienot pirms vai pēc teksta). Tātad komponents izskatīsies šādi:

((( teksts ))

Tas nav slikti, mums ir tikai 3 balsti, bet...

Ko darīt, ja mums ir nepieciešams iekraušanas indikators? Mums būtu jāpievieno vēl viens balsts. Un tas attiecas uz katru jaunu funkciju! Vai komponenšu skaita pieauguma ievērošana tagad šķiet izaicinoša? Jā, noteikti ir!

Tā vietā izmantosim spēļu automātus.

Vienkāršāk, vai ne? Labi, bet kā mēs varam iegūt ikonas pievienošanas funkciju? Tas ir ļoti vienkārši! Vienkārši izmantojiet komponentu šādi:

Atpakaļ

Nākamais

Vienkāršs veids, kā uzlabot veiktspēju

Es dalīšos ar jums ar dažiem padomiem, kurus ir patiešām viegli īstenot, lai jūs varētu uzreiz gūt labumu.

Slinkās ielādes maršruti

Dažreiz mūsu maršruti ir pieejami tikai administratoriem vai lietotājiem ar noteiktu piekļuvi, tie var būt arī mazāk apmeklēti nekā citi. Tie ir ideāli gadījumi, lai izmantotu slinko ielādes maršrutu.

Vienkārši izmantojiet bultas funkciju savā komponenta īpašumā, lai atgrieztu importa funkciju:

 eksportēt noklusējuma jauno VueRouter (
   (
     režīms: 'history',
     routes: [
       (
         ceļš: "/landing",
         component: () => import('../pages/p-welcome'),
         name: 'welcome'
       ),
  ...

Tā vietā:

importēt PWelcome no '@/pages/p-welcome';

export default new VueRouter (
(
mode: 'history',
routes: [
(
ceļš: "/landing",
komponents: komponents:: PWelcome, // tikko importēts komponents
nosaukums: "welcome
),

Lēna ielāde Vue komponentu

Līdzīga situācija var rasties ar Vue komponenti. Varam laiski importēt atsevišķus failu komponentus, piemēram, šādi:

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

// Cita sintakse
export default (
components: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Pateicoties šīs komponentes slinkumam, tā tiks lejupielādēta tikai pēc pieprasījuma. Piemēram, ja mums ir komponente ar v-if, tā tiks pieprasīta tikai tad, ja komponente tiks atveidota. Tātad, ja vien v-if vērtība nav true, komponents netiks ielādēts. Tāpēc slinko importēšanu var izmantot arī attiecībā uz JavaScript faili.

Bonuss: Izmantojot Vue CLI 3+, katrs laiski ielādēts resurss pēc noklusējuma tiek iepriekš ielādēts!

Atribūtu rekvizītu vietā izmantojiet caurspīdīgus apvalkus

Aplūkojiet šādu komponentu:

Bez jebkādām problēmām mēs to varam izmantot šādi:

vai

Tas darbojas, jo Vue ļauj komponentei nodot html atribūtus, pat ja tie nav deklarēti kā rekvizīti. HTML atribūti tiek piemēroti komponenta saknes elementam (šajā gadījumā - ievades elementam).

Problēma rodas, kad mēs vēlamies paplašināt mūsu ievades komponentu, jo tas varētu izskatīties šādi:

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

Tagad, izmantojot komponentu šādā veidā:

nedarbosies tā, kā mēs vēlamies, jo tips un vietne tiks piemērota div (saknes elementam), un tam nav jēgas. Tāpēc mums ar to ir jātiek galā, jo mēs vēlamies pievienot mūsu atribūtus ievades elementam. Jūsu pirmā doma var būt "pievienosim vajadzīgos rekvizītus!", un, protams, tas darbosies, bet... ko darīt, ja mēs vēlamies izmantot tips, automātiskā papildināšana, vietvārds, autofokuss, invalīdiem, ievades režīms, utt., tad mums ir jādefinē rekvizīti katram html atribūtam. Man personīgi šī garā metode nepatīk, tāpēc meklēsim kaut ko labāku!

Mēs varam risināt visu problēmu tikai divas rindiņas.

<template>
  <div class="form-group">
    <label :for="id">((( etiķete ))</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ēs varam izmantot v-bind="$attrs" un nodot atribūtus tieši nedeklarējot milzīgas summas rekvizītiem. Atcerieties arī par opcijas pievienošanu inheritAttrs: false lai atslēgtu atribūtu nodošanu saknes elementam. Iesim nedaudz tālāk: ko darīt, ja mums ir nepieciešams pievienot notikumu klausītājus šai ievadei? Atkal, to varētu apstrādāt ar rekvizītiem vai pielāgotiem notikumiem, taču ir labāks risinājums.

<template>
  <div class="form-group">
    <label :for="id">((( etiķete ))</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>

Ir jauns aprēķināts īpašums, kas atgriež komponentu klausītājiem un pievieno ievades klausītāju. Mēs izmantojam šo aprēķināto ievadi, vienkārši rakstot v-on="klausītāji".

Izmantot skatītāju ar tūlītēju opciju, nevis izveidoto āķi un skatītāju kopā.

Mēs bieži vien iegūstam dažus datus par izveidoto (vai uzstādīto) āķi, bet pēc tam mums ir nepieciešams iegūt šos datus ar katru īpašības maiņu, piemēram, lapas lapu lapu kārtējo lapu. Daži to mēdz pierakstīt šādi:

Protams, tas darbojas, bet... Tā nav labākā pieeja, pat ne labākā. Tātad, pārbaudīsim, kā mēs varam to pārveidot, Piemērs ne tik slikta pieeja:

Iepriekš minētā versija ir labāka, jo nav nepieciešama cita metode, mēs tikai nosaucām metodi, kas jāizsauc, lai mainītu watchedProperty.

Vēl labāka pieeja:

Mēs atbrīvojāmies no izveidotā āķa. Pievienojot opciju "tūlītējs", mēs šo komponenta fetchData metodi izsaucam uzreiz pēc novērošanas sākuma (tas ir nedaudz pirms izveidotā āķa un pēc beforeCreated), tāpēc to var izmantot izveidotā āķa vietā.

Vue.js padomu kopsavilkums

Šie padomi nepadarīs jūsu pieteikumu nevainojamu, taču, tos izmantojot, ātri uzlabot jūsu koda kvalitāti.. Tāpat es ceru, ka jūs atradīsiet kaut ko interesantu iepriekš minētajos piemēros.

Ņemiet vērā, ka daži no tiem tika vienkāršoti raksta vajadzībām.

Lasīt vairāk:

JavaScript ir pilnībā miris. Kāds puisis internetā

Padziļināts ieskats populārākajos React āķos

Programmatūras projekti, kuros var izmantot JavaScript