window.pipedriveLeadboosterConfig = { basis: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versie: 2, } ;(functie () { var w = venster als (w.LeadBooster) { console.warn('LeadBooster bestaat al') } anders { w.LeadBooster = { q: [], on: functie (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: functie (n) { this.q.push({ t: 't', n: n }) }, } } })() Vue.js app verbeteren. Enkele praktische tips - The Codest
The Codest
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Industrie
    • Fintech & Bankieren
    • E-commerce
    • Adtech
    • Gezondheidstechnologie
    • Productie
    • Logistiek
    • Automotive
    • IOT
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
Pijl terug KEREN TERUG
2020-10-30
Software Ontwikkeling

Vue.js app verbeteren. Enkele praktische tips

The Codest

Dominik Grzedzielski

Senior Software Engineer

Vue is een snel groeiend progressief framework voor het bouwen van gebruikersinterfaces. Het werd het JavaScript framework met de meeste sterren op GitHub en het meest gewaardeerde project van 2016 en 2017 op hetzelfde portaal.

Toepassingen maken in Vue is op zich heel eenvoudig, maar als je applicaties van goede kwaliteit wilt bouwen, heb je wat meer uitdaging nodig.

Deel uitmaken van The Codest team en echte voorstander van Vue technologieIk wil wat delen tips (niet gekopieerd uit de officiële Vue-documenten) die moeiteloos het volgende zal verbeteren code kwaliteit en de prestaties van Vue-toepassingen.

Pas eerst de Vue Stijlgids en ESLint toe

Ik wil niet herhalen wat al gezegd is. Er is een stijlgids in de Vue-documenten:
Vue 2 documenten - stijlgids of
Vue 3 documenten - stijlgids

Er zijn vier regelcategorieën. We geven echt om drie ervan:

  • Essentieel regels die voorkomen dat we fouten maken,
  • Aanbevolen en sterk aanbevolen regels voor het bijhouden van best practices - om kwaliteit verbeteren en leesbaarheid van code.

Je denkt misschien... "Wat?! Moet ik elke regel onthouden?" Natuurlijk niet. Je kunt ESLint gebruiken om die regels voor je te onthouden. Je moet alleen alles goed instellen in het ESLint configuratiebestand. Ik stel voor om de aanbevolen voorinstelling want je krijgt een volledig gratis set regels die je helpen om apps te bouwen met goede praktijken. Hoe stel je het in?

Standaard zou je het volgende moeten vinden breidt uit sleutel in ESLint config en vervang "plugin:vue/essentieel" met "plugin:vue/aanbevolen".dat is alles.

Natuurlijk zijn er een paar regels die je moet onthouden, omdat ESLint niet alles zelf kan. Bijvoorbeeld:

  • consistente naamgeving,
  • gebeurtenissen benoemen in kebab-valuta,
  • voorvoegsel $_naamruimte_ privé-eigenschappen in plugins, mixins, enzovoort,
  • volgorde van elementen op het hoogste niveau van een bestandsonderdeel.

Gebruik niet meerdere v-if

Het kan soms nodig zijn om conditioneel meer dan 1 element weer te geven, maar mensen schrijven vaak zoiets:

inhoud

inhoud

inhoud

Het is niet nodig omdat we het eleganter kunnen schrijven:

<code> <template v-if="condition">
   <div>inhoud</div>
   <div>inhoud</div>
   <div>inhoud</div>
 </template>

Maar wat als we het als root-element willen doen? In Vuekunnen we niet voor dit doel. In sommige gevallen kan een verpakking in div voldoende zijn.

Dat is prima, maar hoe graag we het ook zouden willen, soms kunnen we elementen niet in div wikkelen, bijvoorbeeld vanwege html-semantiek (bijv.

  • moet een direct kind zijn van
      of
        ). Dus als we moeten schrijven:

         
      1. (( item.naam ))
      2. ...en dan zien we zo'n foutmelding:

        Vue js code

        We kunnen het aanpakken door met behulp van JSX en een functioneel componentOok moeten we een boolean doorgeven en het zal de v-if vervangen.

        Schrijf geen api call handlers in componenten

        Eigenlijk is dit slechts een van de voorbeelden van wat je niet moet doen in componenten. Doe gewoon wat lokaal nodig is in componentenlogica. Elke methode die extern zou kunnen zijn, moet worden gescheiden en alleen worden aangeroepen in componenten, bijvoorbeeld bedrijfslogica.

        Voorbeeld:

        In plaats van een methode als deze:

        aangemaakt() (
        this.fetchArticles();
        ),
        methoden: (
         async fetchArticles() (
          proberen (
            const data = await axios.get(url);
            this.articles = data.articles;
            ) catch (e) (
            // fout afhandelen
            )
          )
        )

        Schrijf zoiets als dit - roep gewoon de juiste methode aan die API-resultaten teruggeeft:

         async fetchArticles() (
           proberen (
             this.articles = await ArticlesService.fetchAll();
           ) catch (e) (
             // fout afhandelen
           )
          )

        Gebruik gleuven in plaats van grote hoeveelheden rekwisieten

        Soms is het gebruik van props net genoeg, maar er zijn ook gevallen waarin ze niet efficiënt zijn. Dit kan gebeuren in situaties waar we te veel props moeten toevoegen om het component te laten werken zoals we willen. Het eenvoudigste voorbeeld is een knopcomponent. Het is ongetwijfeld een component dat overal in een toepassing kan worden gebruikt. Laten we dus eens kijken naar een knopcomponent zoals deze.

        
        (( tekst ))

        In dit stadium is het een eenvoudig component dat alleen tekstvoorstellen accepteert. Oké, maar het is misschien niet genoeg omdat we pictogrammen nodig hebben in de knop. In dat geval moeten we nog eens 2 props toevoegen (2, omdat we de optie willen hebben om voor of na tekst toe te voegen). Het component ziet er dan zo uit:

        
        (( tekst ))

        Het is niet slecht, we hebben maar 3 rekwisieten, maar...

        Wat als we een laadindicator nodig hebben? Dan moeten we nog een prop toevoegen. En dat voor elke nieuwe functie! Klinkt het nu uitdagend om de groei van het aantal onderdelen bij te houden? Ja, dat doet het zeker!

        Laten we in plaats daarvan slots gebruiken.

        Eenvoudiger, toch? Oké, maar hoe krijgen we de functie pictogram toevoegen? Dat is heel eenvoudig! Gebruik de component gewoon op deze manier:

        Terug
        
        Volgende

        Eenvoudige manier om prestaties te verbeteren

        Ik zal een aantal tips met je delen die heel gemakkelijk te implementeren zijn, zodat je er direct van kunt profiteren.

        Lazy load routes

        Soms hebben we routes die alleen beschikbaar zijn voor admins, of gebruikers met bepaalde toegang, ze kunnen ook minder bezocht worden dan andere. Dit zijn perfecte gevallen om de lazy load route te gebruiken.

        Gebruik gewoon de pijlfunctie in je componenteigenschap om de importeerfunctie te retourneren:

         export standaard nieuwe VueRouter (
           (
             modus: 'geschiedenis
             routes: [
               (
                 pad: '/landing',
                 component: () => import('../pages/p-welcome'),
                 naam: 'welkom
               ),
          ...

        In plaats van:

        importeer PWelcome uit '@/pages/p-welcome';
        
        export standaard nieuwe VueRouter (
        (
        modus: 'history',
        routes: [
        (
        pad: "/landing",
        component: PWelcome, //juist geïmporteerd component
        naam: 'welkom
        ),

        Lui laden van Vue componenten

        Een vergelijkbare situatie kan zich voordoen met Vue onderdelen. We kunnen componenten uit één bestand op deze manier lui importeren:

        const lazyComponent = () => import('pathToComponent.vue')
        export standaard (
        componenten: (lazyComponent )
        )
        
        // Een andere syntaxis
        export standaard (
        componenten: (
        lazyComponent: () => import('pathToComponent.vue')
        )
        )

        Dankzij de lazy load van dat component, wordt het alleen gedownload als het wordt opgevraagd. Als we bijvoorbeeld een component hebben met v-if, zal die alleen worden opgevraagd als de component moet renderen. Dus tenzij de v-if waarde waar is, wordt de component niet geladen. Daarom kan lui importeren ook worden gebruikt voor JavaScript bestanden.

        Bonus: Wanneer je Vue CLI 3+ gebruikt, wordt elke lazy loaded bron standaard geprefetched!

        vue js ontwikkeling

        Gebruik transparante wrappers in plaats van attribuutprops

        Overweeg een component als deze:

        Zonder problemen kunnen we het als volgt gebruiken:

        of


        Het werkt, omdat Vue laat je toe html attributen door te geven aan de component, zelfs als je ze niet als props hebt gedeclareerd. De html-attributen worden toegepast op het basiselement van de component (in dit geval input).

        Het probleem verschijnt wanneer we onze invoercomponent willen uitbreiden, omdat deze er als volgt uit zou kunnen zien:

        <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>

        Gebruik de component nu op deze manier:

        zal niet werken zoals we willen, omdat het type en de placeholder zullen worden toegepast op div (basiselement) en dat heeft geen zin. We moeten er dus iets aan doen, want we willen onze attributen toevoegen aan het invoerelement. Je eerste gedachte is misschien "laten we de attributen toevoegen die we nodig hebben!" en natuurlijk werkt dat, maar... wat als we het volgende willen gebruiken type, autoaanvullen, placeholder, autofocus, uitgeschakeld, ingangsmodusenz., dan moeten we de props definiëren voor elk html attribuut. Persoonlijk houd ik niet van deze lange methode, dus laten we op zoek gaan naar iets beters!

        We kunnen het hele probleem behandelen in slechts twee regels.

        <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>

        We kunnen v-bind="$attrs" en attributen direct doorgeven aan zonder enorme hoeveelheden rekwisieten te declareren. Denk ook aan het toevoegen van de optie inheritAttrs: false om het doorgeven van de attributen aan het rootelement uit te schakelen. Laten we nog iets verder gaan: wat als we event listeners moeten toevoegen aan deze invoer? Nogmaals, dit zou kunnen worden afgehandeld door props of aangepaste gebeurtenissen, maar er is een betere oplossing.

        <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>

        Er is een nieuwe berekende eigenschap die de component voor luisteraars retourneert en de invoerluisteraar toevoegt. We gebruiken die berekende invoer door simpelweg het volgende te schrijven v-on="luisteraars.

        Gebruik watcher met de optie onmiddellijk in plaats van de aangemaakte haak en watcher samen

        We halen vaak gegevens op bij een aangemaakte (of gemounte) hook, maar dan moeten we die gegevens ophalen bij elke verandering van een eigenschap, bijvoorbeeld de huidige pagina van de paginering. Sommigen hebben de neiging om het als volgt op te schrijven:

        Natuurlijk werkt het, maar... Het is niet de beste aanpak, zelfs geen goede. Dus laten we eens kijken hoe we dit kunnen herformuleren, Een voorbeeld van een niet zo slechte benadering:

        De bovenstaande versie is beter omdat een andere methode niet nodig is, we hebben alleen een methode benoemd die moet worden aangeroepen om de watchedProperty te wijzigen.

        Een nog betere aanpak:

        We hebben de created hook verwijderd. Door de optie 'immediate' toe te voegen, laten we die component de fetchData methode direct na de start van de observatie aanroepen (het is iets voor de created hook en na beforeCreated), zodat het gebruikt kan worden in plaats van de created hook.

        Vue.js tips samenvatting

        Deze tips zullen je sollicitatie niet perfect maken, maar als je ze gebruikt, zal dat wel snel gebeuren de kwaliteit van je code verbeteren. Ik hoop dat je iets interessants zult vinden in de bovenstaande voorbeelden.

        Merk op dat sommige vereenvoudigd zijn voor dit artikel.

        Lees meer:

        JavaScript is helemaal dood. Een kerel op het internet

        Een diepere blik op de populairste React haken

        Software projecten waar je JavaScript kunt gebruiken

  • Verwante artikelen

    Software Ontwikkeling

    Bouw Toekomstbestendige Web Apps: Inzichten van The Codest's Expert Team

    Ontdek hoe The Codest uitblinkt in het creëren van schaalbare, interactieve webapplicaties met geavanceerde technologieën, het leveren van naadloze gebruikerservaringen op alle platforms. Ontdek hoe onze expertise digitale transformatie en business...

    DE BESTE
    Software Ontwikkeling

    Top 10 in Letland gevestigde bedrijven voor softwareontwikkeling

    Lees meer over de beste softwareontwikkelingsbedrijven van Letland en hun innovatieve oplossingen in ons nieuwste artikel. Ontdek hoe deze technologieleiders uw bedrijf kunnen helpen verbeteren.

    thecodest
    Oplossingen voor ondernemingen en schaalvergroting

    Essentiële Java-softwareontwikkeling: Een gids voor succesvol uitbesteden

    Verken deze essentiële gids over succesvolle outsourcing Java-softwareontwikkeling om de efficiëntie te verbeteren, toegang te krijgen tot expertise en projectsucces te stimuleren met The Codest.

    thecodest
    Software Ontwikkeling

    De ultieme gids voor outsourcing in Polen

    De sterke groei van outsourcing in Polen wordt gedreven door economische, educatieve en technologische vooruitgang, die IT-groei en een bedrijfsvriendelijk klimaat stimuleert.

    DeCodest
    Oplossingen voor ondernemingen en schaalvergroting

    De complete gids voor IT-auditmiddelen en -technieken

    IT-audits zorgen voor veilige, efficiënte en compliant systemen. Lees het volledige artikel om meer te weten te komen over het belang ervan.

    The Codest
    Jakub Jakubowicz CTO & medeoprichter

    Abonneer je op onze kennisbank en blijf op de hoogte van de expertise uit de IT-sector.

      Over ons

      The Codest - Internationaal softwareontwikkelingsbedrijf met technische hubs in Polen.

      Verenigd Koninkrijk - Hoofdkantoor

      • Kantoor 303B, 182-184 High Street North E6 2JA
        Londen, Engeland

      Polen - Lokale technologieknooppunten

      • Fabryczna kantorenpark, Aleja
        Pokoju 18, 31-564 Krakau
      • Hersenambassade, Konstruktorska
        11, 02-673 Warschau, Polen

        The Codest

      • Home
      • Over ons
      • Diensten
      • Case Studies
      • Weten hoe
      • Carrière
      • Woordenboek

        Diensten

      • Het advies
      • Software Ontwikkeling
      • Backend ontwikkeling
      • Frontend ontwikkeling
      • Staff Augmentation
      • Backend ontwikkelaars
      • Cloud Ingenieurs
      • Gegevensingenieurs
      • Andere
      • QA ingenieurs

        Bronnen

      • Feiten en fabels over samenwerken met een externe partner voor softwareontwikkeling
      • Van de VS naar Europa: Waarom Amerikaanse startups besluiten naar Europa te verhuizen
      • Tech Offshore Ontwikkelingshubs Vergelijking: Tech Offshore Europa (Polen), ASEAN (Filippijnen), Eurazië (Turkije)
      • Wat zijn de grootste uitdagingen voor CTO's en CIO's?
      • The Codest
      • The Codest
      • The Codest
      • Privacy policy
      • Gebruiksvoorwaarden website

      Copyright © 2025 door The Codest. Alle rechten voorbehouden.

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