window.pipedriveLeadboosterConfig = { base: pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster on jo olemassa') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() Vue.js-sovelluksen parantaminen. Käytännön vinkkejä - The Codest
Codest
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Toimialat
    • Fintech & pankkitoiminta
    • E-commerce
    • Adtech
    • Terveysteknologia
    • Valmistus
    • Logistiikka
    • Autoteollisuus
    • IOT
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
Takaisin nuoli PALAA TAAKSE
2020-10-30
Ohjelmistokehitys

Vue.js-sovelluksen parantaminen. Joitakin käytännön vinkkejä

Codest

Dominik Grzedzielski

Vanhempi Software Engineer

Vue on nopeasti kasvava progressiivinen kehys käyttöliittymien rakentamiseen. Siitä tuli JavaScript-kehys, jolla on eniten tähtiä GitHubissa, ja vuosien 2016 ja 2017 eniten tähtiä saanut projekti samassa portaalissa.

Sovellusten luominen Vue on sinänsä todella yksinkertainen, mutta jos haluat rakentaa laadukkaita sovelluksia, sinulla on hieman enemmän haastetta.

Osana Codest joukkue ja todellinen puolestapuhuja Vue-tekniikka, haluan jakaa joitakin vinkkejä (ei kopioitu virallisista Vue-asiakirjoista), joka parantaa vaivattomasti koodi laatu ja Vue-sovellusten suorituskyky.

Sovelletaan ensin Vue Style Guide -ohjeistusta ja ESLintin

En halua toistaa sitä, mitä on jo sanottu. Vue:n asiakirjoissa on tyyliopas:
Vue 2 docs - tyyliopas tai
Vue 3 docs - tyyliopas

Löydät sieltä neljä sääntöluokkaa. Me todella välitämme kolmesta niistä:

  • Essential säännöt, jotka estävät meitä tekemästä virheitä,
  • Suositeltu ja erittäin suositeltava säännöt parhaiden käytäntöjen noudattamiseksi - jotta parantaa laatua ja koodin luettavuus.

Saatat ajatella... "Mitä?! Pitääkö minun muistaa jokainen sääntö?" Ei tietenkään tarvitse. Voit käyttää ESLinttiä huolehtimaan näistä säännöistä puolestasi. Sinun on vain asetettava kaikki oikein ESLintin asetustiedostossa. Suosittelen käyttämään suositeltu esiasetettu koska saat täysin ilmaisen säännöstön, joka auttaa sinua rakentamaan sovelluksia hyvien käytäntöjen mukaisesti. Miten se otetaan käyttöön?

Oletusarvoisesti sinun pitäisi löytää laajentaa näppäin ESLintin konfiguraatiossa ja korvaa "plugin:vue/essential" kanssa "plugin:vue/recommended"Siinä kaikki.

Tietenkin sinun on muistettava muutama sääntö, koska ESLint ei voi hoitaa kaikkea yksin. Esimerkiksi:

  • johdonmukainen nimeäminen,
  • tapahtumien nimeäminen kebab-kotelossa,
  • etuliite $_nimialue_ yksityiset ominaisuudet lisäosissa, yhdistelmissä jne..,
  • yhden tiedoston komponentin ylimmän tason elementtijärjestys.

Älä käytä useita v-if

Joskus voi olla tarpeen renderöidä ehdollisesti useampi kuin 1 elementti, mutta ihmiset kirjoittavat usein jotain sellaista:

sisältö

sisältö

sisältö

Se on tarpeetonta, koska voimme kirjoittaa sen tyylikkäämmin:

<code> <template v-if="condition">
   <div>sisältö</div>
   <div>sisältö</div>
   <div>sisältö</div>
 </template>

Mutta entä jos haluamme tehdä sen juurielementtinä? Osoitteessa Vue, emme voi käyttää tätä tarkoitusta varten. Joissakin tapauksissa div-kääre voi riittää.

Se on ok, mutta vaikka kuinka haluaisimme, joskus emme voi kääriä elementtejä div:iin esimerkiksi html-semantiikan vuoksi (esim.

  • on oltava suoraan
      tai
        ). Joten kun meidän on kirjoitettava:

         
      1. (( item.name ))
      2. ...ja näemme tällaisen virheen:

        Vue js-koodi

        Voimme käsitellä sitä seuraavasti käyttämällä JSX:ää ja toiminnallista komponenttia, myös meidän pitäisi siirtää boolean ja se korvaa v-if.

        Älä kirjoita api-kutsujen käsittelijöitä komponentteihin.

        Itse asiassa tämä on vain yksi esimerkki siitä, mitä ei pitäisi tehdä komponenteissa. Tee vain se, mikä on paikallisesti välttämätöntä komponenttien logiikassa. Kaikki metodit, jotka voivat olla ulkoisia, tulisi erottaa toisistaan ja kutsua vain komponenteissa, esim. liiketoimintalogiikassa.

        Esimerkki:

        Tällaisen menetelmän sijaan:

        created() (
        this.fetchArticles();
        ),
        menetelmät: (
         async fetchArticles() (
          try (
            const data = await axios.get(url);
            this.articles = data.articles;
            ) catch (e) (
            // handle error
            )
          )
        )

        Kirjoita jotain tällaista - kutsu vain oikeaa menetelmää, joka palauttaa API-tulokset:

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

        Käytä lähtö- ja saapumisaikoja suurten rekvisiittamäärien sijasta.

        Joskus rekvisiitan käyttö riittää, mutta on myös tapauksia, joissa se ei ole tehokasta. Näin voi käydä tilanteissa, joissa joudumme lisäämään liikaa rekvisiittaa saadaksemme komponentin toimimaan haluamallamme tavalla. Yksinkertaisin esimerkki voisi olla painikekomponentti. Se on epäilemättä komponentti, jota voitaisiin käyttää missä tahansa sovelluksessa. Tarkastellaan siis tämän kaltaista painikekomponenttia.

        
        (( teksti ))

        Tässä vaiheessa se on yksinkertainen komponentti, joka hyväksyy vain tekstin. Se ei ehkä riitä, koska tarvitsemme painikkeeseen kuvakkeita. Tässä tapauksessa meidän on lisättävä vielä 2 muuta rekvisiittaa (2, koska haluamme valita, haluammeko lisätä ne ennen tai jälkeen tekstin). Komponentti näyttää siis tältä:

        
        (( teksti ))

        Se ei ole huono, meillä on vain 3 rekvisiittaa, mutta...

        Entä jos tarvitsemme latausindikaattorin? No, meidän pitäisi lisätä toinen rekvisiitta. Ja tämä koskee jokaista uutta ominaisuutta! Kuulostaako komponenttien määrän kasvussa pysyminen nyt haastavalta? Kyllä, se on, ehdottomasti!

        Käytetään sen sijaan lähtö- ja saapumisaikoja.

        Eikö olekin yksinkertaisempaa? Okei, mutta miten saamme lisättyä kuvakkeen ominaisuuden? Se on todella helppoa! Käytä vain komponenttia näin:

        Takaisin
        
        Seuraava

        Helppo tapa parantaa suorituskykyä

        Jaan kanssasi vinkkejä, jotka on todella helppo toteuttaa, jotta voit heti hyötyä niistä.

        Lazy load reitit

        Joskus meillä on reittejä, jotka ovat saatavilla vain ylläpitäjille tai käyttäjille, joilla on tietyt käyttöoikeudet, ja niitä saatetaan myös käyttää vähemmän kuin muita. Ne ovat täydellisiä tapauksia laiskan latausreitin käyttämiseen.

        Käytä vain nuolifunktiota komponenttiominaisuudessasi palauttaaksesi tuontifunktion:

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

        Sen sijaan:

        import PWelcome from '@/pages/p-welcome';
        
        export default new VueRouter (
        (
        mode: 'history',
        routes: [
        (
        path: '/landing',
        component: PWelcome, //juuri tuotu komponentti
        nimi: 'welcome'
        ),

        Lazy loading Vue-komponentit

        Samanlainen tilanne voi olla seuraavissa tapauksissa Vue-komponentit. Voimme tuoda yksittäisiä tiedostokomponentteja laiskasti näin:

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

        Kyseisen komponentin laiskan latauksen ansiosta se ladataan vasta, kun sitä pyydetään. Jos meillä on esimerkiksi komponentti, jossa on v-if, sitä pyydetään vain, jos komponentti on tarkoitus renderöidä. Joten ellei v-if-arvo ole true, komponenttia ei ladata. Siksi laiskaa tuontia voidaan käyttää myös seuraavissa tapauksissa JavaScript tiedostot.

        Bonus: Kun käytät Vue CLI 3+ -ohjelmaa, jokainen laiskasti ladattu resurssi esitäytetään oletusarvoisesti!

        vue js kehitys

        Käytä läpinäkyviä kääreitä attribuuttirekvisiitan sijaan

        Mieti esimerkiksi tällaista komponenttia:

        Voimme käyttää sitä ongelmitta näin:

        tai


        Se toimii, koska Vue avulla voit välittää html-attribuutteja komponentille, vaikka et olisikaan ilmoittanut niitä rekvisiittana. Html-attribuutteja sovelletaan komponentin juurielementtiin (tässä tapauksessa input).

        Ongelma ilmenee, kun haluamme laajentaa syöttökomponenttiamme, sillä se voi näyttää tältä:

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

        Kun komponenttia käytetään tällä tavalla:

        ei toimi halutulla tavalla, koska tyyppiä ja paikanhaltijaa sovelletaan div:iin (juurielementtiin), eikä siinä ole mitään järkeä. Meidän on siis käsiteltävä sitä, koska haluamme lisätä attribuutit input-elementtiin. Ensimmäinen ajatuksesi voi olla "lisätään tarvitsemamme rekvisiitta!", ja tietysti se toimii, mutta... entä jos haluamme käyttää tyyppi, automaattinen täydentäminen, paikanhaltija, automaattitarkennus, disabled, inputmode, jne., meidän on määriteltävä rekvisiitta jokaiselle html-attribuutille. Itse en pidä tästä pitkästä menetelmästä, joten etsitään jotain parempaa!

        Voimme käsitellä koko ongelmaa vain kaksi riviä.

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

        Voimme käyttää v-bind="$attrs" ja välittää attribuutit suoraan ilmoittamatta valtavia määriä rekvisiittaa. Muista myös lisätä vaihtoehto inheritAttrs: false estääksesi attribuuttien välittämisen juurielementtiin. Mennään vielä hieman pidemmälle: entä jos haluamme lisätä tapahtumakuuntelijoita tähän syötteeseen? Jälleen kerran se voitaisiin hoitaa rekvisiittojen tai mukautettujen tapahtumien avulla, mutta on olemassa parempi ratkaisu.

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

        On olemassa uusi laskennallinen ominaisuus, joka palauttaa kuuntelijoiden komponentin ja lisää syötteen kuuntelijan. Käytämme tuota laskettua syötettä yksinkertaisesti kirjoittamalla v-on="listeners".

        Käytä vahtimella välitöntä vaihtoehtoa luodun koukun ja vahtimen sijasta yhdessä.

        Haemme usein joitakin tietoja luodulla (tai asennetulla) koukulla, mutta sitten meidän on haettava nämä tiedot jokaisen ominaisuuden muutoksen yhteydessä, esimerkiksi sivumäärittelyn nykyisen sivun kohdalla. Joillakin on tapana kirjoittaa se näin:

        Tietenkin se toimii, mutta... Se ei ole paras lähestymistapa, ei edes hyvä. Tarkistetaanpa siis, miten voimme muokata tätä, Esimerkki ei niin huonosta lähestymistavasta:

        Yllä oleva versio on parempi, koska toista metodia ei tarvita, nimesimme vain metodin, jota on kutsuttava watchedProperty-ominaisuuden muuttamiseksi.

        Vielä parempi lähestymistapa:

        Pääsimme eroon luodusta koukusta. Lisäämällä vaihtoehdon 'immediate' teemme komponentin kutsun fetchData-metodiin heti havainnon alkamisen jälkeen (hieman ennen created-koukkua ja beforeCreated-koukun jälkeen), joten sitä voidaan käyttää created-koukun sijasta.

        Vue.js vinkkien yhteenveto

        Nämä vinkit eivät tee hakemuksestasi täydellistä, mutta niiden käyttäminen tekee siitä nopeasti parantaa koodin laatua. Toivon myös, että löydätte jotain kiinnostavaa edellä mainituista esimerkeistä.

        Huomaa, että joitakin niistä on yksinkertaistettu artikkelin tarkoituksia varten.

        Lue lisää:

        JavaScript on täysin kuollut. Joku kaveri internetissä

        Syvempi katsaus suosituimpiin React-koukkuihin

        Ohjelmistoprojektit, joissa voit käyttää JavaScript:tä

  • Aiheeseen liittyvät artikkelit

    Ohjelmistokehitys

    Tulevaisuuden web-sovellusten rakentaminen: The Codest:n asiantuntijatiimin näkemyksiä

    Tutustu siihen, miten The Codest loistaa skaalautuvien, interaktiivisten verkkosovellusten luomisessa huipputeknologian avulla ja tarjoaa saumattomia käyttäjäkokemuksia kaikilla alustoilla. Lue, miten asiantuntemuksemme edistää digitaalista muutosta ja liiketoimintaa...

    THECODEST
    Ohjelmistokehitys

    Top 10 Latviassa toimivaa ohjelmistokehitysyritystä

    Tutustu Latvian parhaisiin ohjelmistokehitysyrityksiin ja niiden innovatiivisiin ratkaisuihin uusimmassa artikkelissamme. Tutustu siihen, miten nämä teknologiajohtajat voivat auttaa nostamaan liiketoimintaasi.

    thecodest
    Yritys- ja skaalausratkaisut

    Java-ohjelmistokehityksen perusteet: A Guide to Outsourcing Successfully

    Tutustu tähän keskeiseen oppaaseen Java-ohjelmistokehityksen onnistuneesta ulkoistamisesta tehokkuuden parantamiseksi, asiantuntemuksen saamiseksi ja projektin onnistumiseksi The Codestin avulla.

    thecodest
    Ohjelmistokehitys

    Perimmäinen opas ulkoistamiseen Puolassa

    Ulkoistamisen lisääntyminen Puolassa johtuu taloudellisesta, koulutuksellisesta ja teknologisesta kehityksestä, joka edistää tietotekniikan kasvua ja yritysystävällistä ilmapiiriä.

    TheCodest
    Yritys- ja skaalausratkaisut

    Täydellinen opas IT-tarkastustyökaluihin ja -tekniikoihin

    Tietotekniikan tarkastuksilla varmistetaan turvalliset, tehokkaat ja vaatimustenmukaiset järjestelmät. Lue lisää niiden merkityksestä lukemalla koko artikkeli.

    Codest
    Jakub Jakubowicz teknologiajohtaja ja toinen perustaja

    Tilaa tietopankkimme ja pysy ajan tasalla IT-alan asiantuntemuksesta.

      Tietoa meistä

      The Codest - Kansainvälinen ohjelmistokehitysyritys, jolla on teknologiakeskuksia Puolassa.

      Yhdistynyt kuningaskunta - pääkonttori

      • Toimisto 303B, 182-184 High Street North E6 2JA
        Lontoo, Englanti

      Puola - Paikalliset teknologiakeskukset

      • Fabryczna Office Park, Aleja
        Pokoju 18, 31-564 Krakova
      • Brain Embassy, Konstruktorska
        11, 02-673 Varsova, Puola

        Codest

      • Etusivu
      • Tietoa meistä
      • Palvelut
      • Tapaustutkimukset
      • Tiedä miten
      • Työurat
      • Sanakirja

        Palvelut

      • Se neuvoa-antava
      • Ohjelmistokehitys
      • Backend-kehitys
      • Frontend-kehitys
      • Staff Augmentation
      • Backend-kehittäjät
      • Pilvi-insinöörit
      • Tietoinsinöörit
      • Muut
      • QA insinöörit

        Resurssit

      • Faktoja ja myyttejä yhteistyöstä ulkoisen ohjelmistokehityskumppanin kanssa
      • Yhdysvalloista Eurooppaan: Miksi amerikkalaiset startup-yritykset päättävät muuttaa Eurooppaan?
      • Tech Offshore -kehityskeskusten vertailu: Tech Offshore Eurooppa (Puola), ASEAN (Filippiinit), Euraasia (Turkki).
      • Mitkä ovat teknologiajohtajien ja tietohallintojohtajien tärkeimmät haasteet?
      • Codest
      • Codest
      • Codest
      • Privacy policy
      • Verkkosivuston käyttöehdot

      Tekijänoikeus © 2025 by The Codest. Kaikki oikeudet pidätetään.

      fiFinnish
      en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek fiFinnish