Bæting á Vue.js-forritinu. Nokkur hagnýt ráð

Að búa til forrit í Vue Er í sjálfu sér mjög einfalt, en ef þú vilt búa til hágæða forrit, bíður þín aðeins meiri áskorun.

Að vera hluti af The Codest lið og raunverulegur talsmaður Vue-tækni, ég vil deila nokkrum ráð (ekki afritað úr opinberum Vue skjölum) sem mun auðveldlega bæta kóði gæði og hinn Framkvæmd Vue-forrita.

Fyrst og fremst skaltu beita Vue stílhandbókinni og ESLint.

Ég vil ekki endurtaka það sem þegar hefur verið sagt. Í skjölum Vue er stíllhandbók:
Vue 2 skjöl – stíllhandbók eða
Vue 3 skjöl – stíllhandbók

Þú finnur þar fjórar regluflokka. Við leggjum sérstaka áherslu á þrjá þeirra:

• Óhjákvæmilegt reglur sem koma í veg fyrir okkur frá villum,
• Mælt með og Mjög mælt með reglur um að viðhalda bestu starfsháttum – til bæta gæði og læsileika kóða.

Þú gætir hugsað… “Hvað?! Á ég að muna öll reglurnar?” Auðvitað þarftu það ekki. Þú getur notað ESLint til að sjá um þessi reglur fyrir þig. Þú þarft bara að stilla allt rétt í ESLint-stillingarskránni. Ég legg til að nota mælt með forsetning Þú færð algerlega ókeypis regluserð sem hjálpa þér að byggja upp öpp með góðum vinnubrögðum. Hvernig seturðu það upp?

Á sjálfgefinni stillingu ættir þú að finna útvíkkar Sláðu inn í ESLint-stillinguna og skiptu út "viðbót:vue/essential" með "viðbót:vue/mælt", það er allt.

Auðvitað eru nokkrar reglur sem þú ættir að muna, því ESLint getur ekki séð um allt sjálft. Til dæmis:

• samræmd nafnagjöf,
• nafnun atburða í kebab-tilfelli,
• forskeyting $_nafnrými_ einkareignir í viðbótum, mixinum o.s.frv.,
• raðbundinn íhlutaflokks efsta stigs þáttur röð.

Ekki nota marga v-if

Stundum getur verið nauðsynlegt að skila fleiri en einum þætti skilyrt, en fólk skrifar oft eitthvað svona:

efni

efni

efni

Það er óþarfi því við getum skrifað það fínni hátt:

<code> <template v-if="condition">
   <div>efni</div>
   <div>efni</div>
   <div>efni</div>
 </template>Hljóðskrift

En hvað ef við viljum gera það sem rótarþátt? Í Vue, við getum ekki notað sniðmát til þessa tilgangs. Í sumum tilfellum gæti það dugað að vefja það í div.

Það er í lagi, en þrátt fyrir hversu mikið við gætum viljað, stundum getum við ekki pakkað þáttum inn í div, til dæmis vegna HTML-semantíkur (t.d. liður þarf að vera beint barn af

eða
). Svo þegar við þurfum að skrifa:

 

   (( item.name ))Hljóðskrift

…og við munum sjá svona villu :



Við getum tekist á við það með með JSX og virkri íhlut, einnig ættum við að senda boolean og það mun koma í stað v-if.

</>

Ekki skrifa API-köllunarhöndlara í íhlutum.

Í raun er þetta aðeins eitt dæmi um hvað þú ættir ekki að gera í íhlutum. Gerðu einfaldlega það sem er staðbundið nauðsynlegt í lógík íhlutanna. Allar aðferðir sem gætu verið ytri ættu að vera aðskildar og kallaðar eingöngu innan íhlutanna, t.d. í viðskiptalógík.

Dæmi:

Í stað aðferðar eins og þessarar:

created() (
this.fetchArticles();
),
aðferðir: (
 async fetchArticles() (
  try (
    const gögn = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // handle error
    )
  )
)Hljóðskrift

Ritaðu eitthvað svona – kallaðu bara rétta aðferðina sem skilar forritaskil niðurstöður:

async fetchArticles() {
   try {
     this.articles = await ArticlesService.fetchAll();
   } catch (e) {
     // takast á við villu
   }
}Hljóðskrift

Notaðu raufar í stað mikils fjölda leikmuna.

Stundum dugar það að nota props, en það eru líka tilvik þar sem þau eru ekki skilvirk. Þetta getur gerst í aðstæðum þar sem við þyrftum að bæta of mörgum props til að láta íhlutinn virka eins og við viljum. Einfaldasta dæmið gæti verið hnappaeining. Án efa er þetta íhlut sem hægt er að nota hvar sem er í forritinu. Svo skulum við íhuga hnappaeiningu eins og þessa.

(( texti ))

Á þessu stigi er þetta einföld íhlut sem tekur aðeins við textareiginleika. Ok, en það gæti ekki verið nóg þar sem við munum þurfa táknin í hnappinn. Í þessu tilfelli verðum við að bæta við tveimur eiginleikum í viðbót (2, vegna þess að við viljum geta bætt við áður en eða eftir texta). Svo mun íhlutinn líta svona út:

(( texti ))

Það er ekki slæmt, við erum bara með þrjá leikmuni, en…

Hvað ef við þurfum hleðsluvísi? Jæja, þá þyrftum við að bæta við öðrum prop. Og það þarf að gera fyrir hverja nýja eiginleika! Hljómar það krefjandi að halda í við vöxt fjölda þátta núna? Já, það er það, alveg örugglega!

Notum frekar raufar..

Einfaldara, ekki satt? Ok, en hvernig fáum við aðgang að viðbótar-táknaaðgerðinni? Það er mjög auðvelt! Notaðu bara þennan hlut svona:

Aftur

Næst

Auðveld leið til að bæta frammistöðu

Ég mun deila með þér nokkrum ráðum sem eru mjög auðveld í framkvæmd, svo þú getir strax haft gagn af þeim.

Latur hleðsla leiða

Stundum eru leiðir aðeins í boði fyrir stjórnendur eða notendur með sérstakan aðgang, og þær eru einnig minna notaðar en aðrar. Þetta eru fullkomin tilfelli til að nota lazy load-leið.

Notaðu bara örvarfallið í component-eiginleikanum þínum til að skila innflutningsfalli:

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

Í staðinn fyrir:

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

export default new VueRouter (
(
mode: 'history',
routes: [
(
path: '/landing',
component: PWelcome, //bara innfluttur component
name: 'welcome'
),

Letilæsing á Vue-hlutum

Svipað atvik getur gerst með Vue íhlutir. Við getum letilega flutt inn einstaka skráarkomponenta svona:

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


// Önnur setningagerð
export default (
components: (
lazyComponent: () => import('pathToComponent.vue'))

)

Þökk sé letilegu hleðsluferli þessa íhlutar verður hann hlaðinn aðeins þegar óskað er eftir honum. Til dæmis, ef við höfum íhlut með v-if, verður hann kallaður aðeins ef íhluturinn á að birta. Svo nema v-if-gildið sé satt, verður íhluturinn ekki hlaðinn. Þess vegna er hægt að nota letilega innflutninga einnig fyrir JavaScript skrár.

Bónus: Þegar notað er Vue CLI 3+, er öllum auðlindum sem hlaðnar eru seint sótt á undan á sjálfgefinni stillingu!



Notaðu gegnsæjar umbúðir í stað eiginleikaprópra

Íhugaðu íhlut eins og þennan:

Hljóðskrift

Án vandamála getum við notað það svona:

eða




Það virkar, vegna þess að Vue Leyfir þér að senda HTML-eiginleika til íhlutarins, jafnvel þó þú hafir ekki lýst þeim sem props. HTML-eiginleikarnir eru beittir á rótareiningu íhlutarins (input í þessu tilfelli).

Vandamálið kemur upp þegar við viljum stækka inntaksþáttinn okkar, þar sem hann gæti litið svona út:

<code> <template>
   <div class="form-group">
     <label :for="id">(( merkimiði ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>Hljóðskrift

Nú, með því að nota þennan hluta svona:

 <base-input
   v-model="text"
   type="text"
   placeholder="Write something"
 />Hljóðskrift

mun ekki virka eins og við viljum, því tegundin og staðfyllirinn verða bættir við div (rótareininguna) og það er engan veginn skynsamlegt. Svo við verðum að leysa þetta, því við viljum bæta eiginleikana okkar við inntaksþáttinn. Fyrsta hugmyndin þín gæti verið “bætum við þá eiginleika sem við þurfum!” og auðvitað mun það virka, en… hvað ef við viljum nota tegund, sjálfklára, Staðfyllir, sjálfvirkur fókus, fatlaður, Inntaksgerð, o.s.frv., þá verðum við að skilgreina eiginleikana fyrir hvert HTML-eiginleika. Ég persónulega líkar ekki þessari langdregnu aðferð, svo skulum við leita að einhverju betra!

Við getum tekist á við allt vandamálið í bara tvær línur.

<template>
  <div class="form-group">
    <label :for="id">(( merkimiði ))</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>

Við getum notað v-bind="$attrs" og senda eiginleika beint til inngangur án þess að tilkynna gríðarlegt magn af aukahlutum. Einnig, mundu að bæta við valkostinum erfðastillingar: falskt til að hindra að eiginleikarnir séu sendir til rótarþáttarins. Skulum fara aðeins lengra: hvað ef við þurfum að bæta við atburðahöfundum á þetta inntak? Aftur mætti það leysast með props eða sérsniðnum atburðum, en það er betri lausn.

<template>
  <div class="form-group">
    <label :for="id">(( merkimiði ))</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>

Það er ný reiknuð eiginleiki sem skilar hlutanum fyrir hlustara og bætir við inntaks-hlustara. Við notum það reiknaða inntak einfaldlega með því að skrifa v-on="hlustendur".

Notaðu watcher með immediate-valkostinum í stað þess að nota created-hookið og watcher saman.

Oft sækjum við gögn á created- eða mounted-hook, en síðan þurfum við að sækja þessi gögn við hverja breytingu á eiginleika, t.d. núverandi síðu í síðaskiptingu. Sumir skrifa það svona:

<script>
export default (
  name: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

Auðvitað virkar það, en… Þetta er ekki besta nálgunin, ekki einu sinni góð. Svo skulum við skoða hvernig við getum endurskipulagt þetta. Dæmi um ekki svo slæma nálgun:

<script>
export default (
name: 'SomeComponent',
watch: (
  someWatchedProperty: 'fetchData'
),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

Upprunalega útgáfan er betri vegna þess að ekki þarf að bæta við annarri aðferð; við nefndum einfaldlega aðferð sem á að kalla til að breyta watchedProperty.

Enn betri nálgun:

<script>
  export default (
    name: 'SomeComponent',
    watch: (
      someWatchedProperty: (
        handler: 'fetchData',
        immediate: true
      )
    ),
    methods: (
      fetchData() (
        // handle fetch data
      )
    )
  );
</script>

Við losuðum okkur við created hook. Með því að bæta við valkostinum ‘immediate’ látum við þennan hluta kalla fetchData-aðferðina strax í upphafi athugunarinnar (það er örlítið á undan created hook og eftir beforeCreated), svo hægt sé að nota hann í stað created hook.

Vue.js ráðargreining

Þessir ráð munu ekki gera umsóknina þína fullkomna en að nota þá mun fljótt bæta gæði kóðans þíns. Einnig vona ég að þú finnir eitthvað áhugavert í ofangreindum dæmum.

Athugið að sum þeirra voru einfaldað fyrir tilgang greinarinnar.

Lesa meira:

JavaScript er alveg dauður. Einhver gaur á netinu

Nánari skoðun á vinsælustu React-krókunum

Hugbúnaðarverkefni þar sem þú getur notað JavaScript