I och med den kontinuerliga ökningen av frontend JavaScript-ramverk, inklusive det nya Vue.js 3 har det blivit viktigt att hålla sig uppdaterad och förstå allt om deras nya funktioner.
I den här artikeln kommer vi att utforska Vue.js 3 och dess nyligen tillagda funktioner. Dessa senaste tillägg gör Vue.js ännu mer robust, vilket gör det till ett bra ramverk att överväga för ditt nästa projekt. Du komma lära dig i detalj 10 saker du borde veta om Vue.js och hur det hjälper dig att leverera skalbara och högpresterande frontend-applikationer.
Redo? Nu sätter vi i gång!
Vad är Vue.js?
Enligt Evan You, som skapade Vue.js:
”Vue.js är en mer flexibel, mindre påstridig lösning. Det är bara ett gränssnittslager, så du kan använda det som en lätt funktion på sidor i stället för ett helt SPA.”
Han ville skapa ett frontend-ramverk som var lika kraftfullt som Angular, men också ”lättare” och mer flexibelt utan alla onödiga plugin och begrepp som Angular har.
Resultatet var Vue.js, som är ett av de mest populära frontend-ramverken som används idag.
Varför utvecklare använder Vue.js
Olika orsaker driver utvecklare att använda vissa tekniker. Låt oss diskutera varför vi tycker du borde lära dig Vue.js.
Först och främst är Vue.js ett av de enklaste ramverken för de flesta utvecklare att hoppa in i, eftersom detta ramverk använder JavaScript. Därför kommer alla som har grundläggande JavaScript-kunskaper att kunna utveckla med Vue.js.
Vue CLI-verktyget kombinerat med andra frontend-programutvecklingsverktyg gör det lätt som en plätt att konfigurera Vue.js. Det kommer inställt med vissa funktioner som standard, men du kan också bygga kod med en DRY-logik (Upprepa dig inte/Don’t Repeat Yourself) och struktur.
Reaktivitet är också inbyggt i Vue.js. Det betyder att realtidsfunktionen som var populär på Angular är lätt som en plätt med Vue.js. Till exempel kan du enkelt tillämpa ett enkelt direktiv som v-if i din applikation.
Låt oss sedan diskutera de primära fördelarna och nackdelarna med Vue.js.
Fördelar och nackdelar med Vue.js
Vue.js är det näst mest populära ramverket idag. Låt oss se vad webbutvecklare älskar med det, och vad som driver bort dem.
Vue.js fördelar
Vi börjar med att utforska de positiva aspekterna med Vue.js.
Liten storlek
Vue.js har en mycket liten nedladdningsstorlek på ca 18 KB vilket är utmärkt jämfört med andra ramverk som är mycket större. Men med den storleken kommer Vue.js positivt att påverka SEO och UX av din frontend-applikation.
Enkelfilskomponent och läsbarhet
Vue.js använder en komponentbaserad arkitektur och separerar därmed stora bitar kod i mindre komponenter. I Vue.js är allt en komponent, och varje komponent är skriven med HTML, CSS och JavaScript, vilket uppmuntrar läsbarhet och enkelhet.
Solitt verktygssystem
Vue.js stöder massor av frontend-utvecklingsverktyg som standard, med liten eller ingen konfiguration från din sida. Till exempel stöder Vue.js verktyg som Babel och Webpack. Dessutom erbjuder de enhetstestning, end-to-end testbibliotek, flexibla och lättanvända routingsystem, rendering på serversidan (SSR) och mycket mer.
Lättanvänt
Om du har använt Vue.js innan håller du nog med om att det är mycket lätt att använda. Det moderniserar den vanliga webbutvecklingsmetoden, vilket gör det enkelt för alla nybörjare att hoppa in direkt och känna sig som hemma mycket snabbt.
Vue.js Nackdelar
Nu när vi har gått igenom fördelarna är det dags att utforska de negativa sidorna av Vue.js.
Reaktivitetskomplexitet
Implementering av tvåvägsbindande i Vue.js är ett praktiskt verktyg för att hantera Vue.js-komponenter. Tvåvägsbindning innebär att dela data mellan en komponentklass och dess mall. Det är utvecklat så att om data ändras på en plats uppdaterar den automatiskt de andra.
Det finns dock en fråga om hur reaktiviteten fungerar när reaktivitetssystemet endast rerendar om de bitar av data som utlöses. Ibland sker det misstag under dataläsning, så det funkar bara för platta data. Du kan läsa om det här kända problemet och hur det hanteras på Vue.js:s webbplats.
Språkbarriär
Inledningsvis användes Vue.js huvudsakligen av kineserna; stora företag som Xiaomi och Alibaba hjälpte till att popularisera ramverket och skapa efterfrågan på arbetsmarknaden. Men med betydande användning från många kinesiska företag var massor av forum, diskussionskanaler och liknande främst på kinesiska, vilket gjorde det svårt att använda för andra utvecklare.
Idag är detta inte längre fallet eftersom Vue.js har utvecklats för att införliva stöd på många språk, men det finns vissa språk med mindre stöd.
Risker med överdriven flexibilitet.
Som nämnts ovan är Vue.js mycket flexibelt och lätt att använda. Därför är det lätt att ha en massa spaghettikod överallt eftersom alla i ett företag kan ha olika åsikter om hur saker ska göras.
Från för- och nackdelarna med Vue.js som diskuteras ovan kanske du redan har upptäckt några funktioner som du älskar och några som inte funkar för dig.
10 saker du borde känna till om Vue.js
Nedan är de tio saker du behöver veta om Vue.js och varför det är viktigt att känna till dem.
Beräknade egenskaper
En beräknad egenskap är en av de mest använda funktionerna i Vue.js. En beräknad egenskap gör att du kan skapa egenskaper som kan ändras, manipuleras och visa data på ett effektivt och läsbart sätt.
Det är praktiskt när du vill upprepa många små metoder för saker som formatering, ändring av värden, eller en större process som du behöver utlösa i vissa situationer.
Beräknade egenskaper hjälper till att ta bort mycket överflödig logik i din mall. För mycket av denna logik kan göra din kod onödigt lång och komplicerat och svår att snabbt underhålla.
Om du vill formatera en sträng till stora bokstäver, gör du så här:
<template>
<div>
<p> I love {{ value.toUpperCase() }} </p>
</div>
</template>
Tänk om du behöver ändra value-variabeln på 50 olika ställen? Det blir snabbt en hel del kod att ändra. eller hur? Tja, det är vad vi har beräknade egenskaper till.
<template>
<div>
<p> I love {{ value }} </p>
</div>
</template>
<script>
export default {
computed:{
value(){
return this.value.toUpperCase()
}
}
}
</script>Du kan enkelt ändra toUpperCase() till toLowerCase(), och det kommer att reflektera allt från en enda punkt.
Händelsehantering
Vue.js gör underordnad till överordnad-kommunikation lätt som en plätt med $emit och v-on. Det blir enkelt att hantera kommunikation mellan komponenthierarkier.
Funktionen $emit accepterar två parametrar: en sträng för namn och ett valfritt värde som ska skickas.
v-on:event-name används på den underordnade komponenten för att ta emot händelsen som skickades av dess överordnade komponent:
<template>
<section>
<button @click="onClick">Add </button>
</section>
</template>
<script>
export default {
name: "AddEvent",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>När du utlöser Add-knappen utlöser onClick-metoden $emit-händelsen, som skickar add-händelsen till en underordnad komponent som lyssnar efter add-händelser.
Låt oss ta en titt på hur man lyssnar på en händelse:
<template>
<section>
<p v-show="showSaveMsg">This component is listening to the ADD event</p>
<add-event v-on:add="onAdd"></add-event>
</section>
</template>
<script>
export default {
data(){
return {
showSaveMsg: false
}
},
components:{
AddEvent: () => import('./AddEvent')
},
methods: {
onAdd() {
this.showSaveMsg = true;
}
}
}
</script>Ovanstående kod lyssnar på add-händelsen och svarar genom att ändra värdet på showSaveMsg till true, vilket visar meddelandet igen.
Latladdning/Async-komponenter
Latladdning är ett av de bästa prestandahacken för Vue.js, där komponenter läggs till och renderas asynkront eller vid behov, vilket avsevärt minskar filstorleken, HTTP-svarstiden och så vidare.
Latladdning uppnås med Webpack dynamisk importering, som också stöder koddelning.
Vue.js tillåter latladdning av komponenter och kan uppnås globalt med följande skript:
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Du kan uppnå det lokalt med en komponent som nedan:
<template>
<div>
<component></component>
</div>
</template>
<script>
export default {
components: {
'Component': () => import('./Component')
}
}
</script>Globala komponenter
Vi kan uppnå betydande återanvändbarhet i Vue.js med globala komponenter, där du registrerar en komponent en gång och sedan använder den överallt i din Vue.js-instans
Globala komponenter är en viktig funktion och kan spara massor av tid på att registrera komponenter individuellt varje gång, men det kan lätt missbrukas genom att registrera alla komponenter globalt. Att registrera alla komponenter globalt kan enkelt leda till en större storlek vilket resulterar i dålig SEO och långsammare sidladdningstid.
Se alltid till att registrera globala komponenter som har många användningsfall i ditt projekt enligt nedan:
import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));Enkelfilskomponent
En av de mest kraftfulla funktionerna i Vue.js är komponenter; de hjälper dig att utöka viktiga HTML-element, CSS och JavaScript för att inkapsla återanvändbar kod.
Komponenter kan hjälpa till att bryta ner stora projekt i mindre, återanvändbara bitar som vi kan använda över hela projektet, vilket uppmuntrar DRY-principen i programvaruteknik.
Det kan ge skapa och inkapsling för stora projekt, återanvändbar kod, och kan separeras i .vue-filer.
<template>
<section>
<button @click="onClick">Add</button>
</section>
</template>
<script>
export default {
name: "CustomButtom",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>
<style scoped>
button{
/** Button Styles */
}
</style>Ovanstående skript skapar en anpassad knappkomponent som vi kan återanvända inom vårt projekt. Varje komponent har sin egen HTML, CSS och JavaScript.
Testning
Vue.js tillhandahåller ett av de mest robusta testbiblioteken, vilket gör enhetstestning med Jest och Mocha eller end-to-end-testning lätt som en plätt, med liten eller ingen konfiguration.
En snabb titt på testning med dessa verktyg kan vara värt besväret. Så låt oss gå igenom att installera, konfigurera och testa ett demoprojekt nedan.
Om du använder det rekommenderade Vue CLI-verktyget för att konfigurera ditt projekt, kör följande kommandon:
vue add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
Därefter, efter installationen, inkludera koden nedan, som visar hur man testar en enkel komponent:
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ message }}</p>',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})Vues testbibliotek har två bra alternativ för att testa dina komponenter: Mount och Shallow.
Om du vill testa en komponent med fullständig isolering, använd shallow-metoden. Om du behöver arbeta på en komponent med delkomponenter som du vill säkerställa kommunikation för funkar dock mount-alternativet mycket bra.
Det kraftfulla Vue CLI-verktyget
Vue CLI är ett utmärkt CLI-verktyg och ger en Vue-utvecklare en hel del kraft. Med det kan du snabbt testa en komponent i isolering. Det som är bra med Vue CLI är att du helt kan utveckla en komponent i isolering, testa den och fortfarande ha tillgång till varm omladdning när du itererar över den specifika komponenten.
Som demonstration, låt oss installera Vue CLI globalt:
npm install -g @vue/cliDärefter kan du testa en komponent genom att köra kommandot nedan:
vue serve ./components/views/Home.vueOm du vill dra ut en viss komponent för att till exempel dela den med dina kollegor kan du uppnå det med kommandot nedan:
vue build --target lib --name goldenRule ./components/views/HomeVue CLI är mycket kraftfullt och kan spara massor av produktiv tid om du behärskar konsten att använda den. Om du vill lära dig mer kan du ta en titt på den officiella dokumentationen.
Egenskapshantering
Egenskapshantering är avgörande för Vue-komponenten eftersom de kan skapas på olika sätt. Du kan också validera dem, skapa flera egenskaper, och ändra dem efter behov.
Det finns flera sätt att skapa en ny egenskap i en Vue-komponent. Förutsatt att du har din komponent redo måste du skapa en isAdmin-egenskap.
Så här kan du göra det på olika sätt:
<template>
<section>
<component v-if="isAdmin"></component>
</section>
</template>
<script>
export default {
name: 'Component',
// One
props: {
isAdmin: {
type: Boolean,
default: false,
required: true
}
},
// Two
props: ['isAdmin'],
// Three
props: {
isAdmin: Boolean
}
}
</script>Att validera din egenskap/prop är mycket viktigt. Lyckligtvis är det också mycket enkelt:
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...Slutligen är det lika enkelt att ändra egenskapen som att bara anpassa dess värden:
//...
methods: {
isAdmin() {
this.isAdmin = true;
}
}
//..
Tilldela värdet till egenskapen i en överordnad komponent:
<template>
<section>
<component :isAdmin="true"></component>
</section>
</template>Rendering på serversidan (SSR)
I och med alla de fina funktioner och fördelar som finns med att använda Vue.js för att skapa frontend-applikationer är Vue.js för sig själv fortfarande ett klientside-bibliotek som bara renderar och manipulerar DOM-element.
Rendering på serversidan hjälper klientsideramverk som Vue.js att göra bättre ifrån sig. Sökrobotar kommer att se fullt renderade sidor på din webbplats när de genomsöker den.
För att få din webbplats indexerad av Google och Bing snabbare måste din webbplats ha en snabbare och högre tid-till-innehålls-poäng. Det är vad rendering på serversidan i Vue.js hjälper dig att uppnå.
Rendering på serversidan (SSR) är en populär teknik för att rendera en vanlig enkelsidesapp (SPA) på servern och sedan skicka en fullt renderad sida till läsaren.
När sidan renderas på serversidan skickas den till klienten som ett svar. Således har varje information redan renderats medan webbläsaren visar sökmotorsidan.
Att uppnå SSR i Vue.js är svårt för nybörjare. Det blir lättare att använda Nuxt.js, som har en inbyggd SSR och en mycket låg inlärningskurva.
Distribution
Vue.js kommer att visa många varningar, fel och uppblåsta filstorlekar under utveckling, men dessa problem försvinner omedelbart när du slår på produktion för distribution. Vue.js kommer automatiskt att konfigurera Webpack-byggverktyg, minifieringar, CSS-extraktion och rensning, cachning, spåra körningsfel, och mycket mer.
Kinsta’s kunder kan överväga att använda den inbyggda kodminifieringsfunktionen som de kan komma åt direkt i MyKinsta’s instrumentpanel. Detta gör att de enkelt kan aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick.
Vue.js gör din distributionsprocess väldigt enkel genom att automatiskt konfigurera och ställa in produktionsmiljön utan några extra steg från utvecklaren.
För att distribuera din Vue.js-app kan du läsa igenom dess allmänna guider.
Sammanfattning
I den här artikeln har vi utforskat i detalj vad Vue.js är för något, varför du borde använda det, dess för- och nackdelar, och de 10 saker du bör känna till om det.
Förhoppningsvis har du utökat dina kunskaper om Vue.js för att leverera skalbara och högpresterande frontend-applikationer.
Fortsätt koda!
Om du har frågor eller förslag vill vi gärna höra ifrån dig. Berätta för oss i kommentarfältet nedan!
I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me
Lämna ett svar