10 Februari 2020

Vad har Vue.js 3 att erbjuda?

Vi kikar på Vue.js 3 och dess funktioner - vilka förändringar kommer vi att se framöver?

VUE.JSUTVECKLINGKUNSKAPJAVASCRIPT

Vue.js - Det progressiva ramverket

Kort om Vue.js

Vue.js är ett lättillgängligt, mångsidigt ramverk som är enkelt att sätta sig in i om man har tidigare kunskaper inom HTML, CSS och JavaScript. Förutom att det är enkelt att jobba med så har det bättre prestanda och mindre storlek på biblioteket än både React och Angular och är därför ett starkt alternativ till de större ramverken på marknaden.

Prestandaökning

Utöver funktionerna som jag nämner nedan och allt annat coolt som Vue.js 3 erbjuder så har det även en prestandaökning med 120-130% jämfört med Vue.js 2 - som är redan ett högpresterande, konkurrerande ramverk med bland annat React och Angular. Denna ökning i prestanda är enorm och kommer förmodligen öka antalet webbplatser som använder sig av Vue.js.

Composition API

Composition API är det som diskuteras mest när det kommer till Vue.js 3, då det är en nytt sätt att hantera återanvändningsbar logik och kodorganisering. I dagsläget används Options API för att bygga komponenter, vilket tar emot egenskaper som "data", "methods", "props" med mera. Nackdelen med detta är att du behöver veta vilka egenskaper som är tillgängliga i templaten samt beteendet av "this" nyckelordet. Under huven så förvandlar Vue kompileraren dessa egenskaper till fungerande kod, på grund av det kan vi inte ta del av bl.a automatiska förslag.

Målet med Composition API är att försöka lösa detta problemet genom att exponera tillgängliga egenskaper som JavaScript funktioner. Teamet bakom Vue.js beskriver Component API som: "En samling av tilläggsbara, funktions-baserade API:er som tillåter flexibla sammansättningar av komponent-logik". Kod som är skriven med Composition API är mer läsbar och gör det enklare att lära sig.

Suspense

En till nyhet som vi kan förvänta oss i Vue.js 3 är Suspense komponenten. Suspense komponenten renderar en reserv-komponent tills ett visst tillstånd har uppnåtts, då renderar den huvudsakliga komponenten istället. Ett exempel för detta är t,ex när man vill visa en laddningsindikation när man hämtar data, för att sedan visa datat när det är färdigladdat.

Flera v-models på samma DOM element

I dagsläget kan man enbart bara ha ett v-model direktiv per DOM element, vilket bara är ett sätt att hantera en tvåvägsbindning för "value" fältet på ett element, där vi kan ange ett reaktivt värde. Med Vue.js 3 kan man specificera flera v-models på samma DOM element genom att binda ett modellnamn i v-model direktivet som i exemplet nedan.

<ContactForm v-model:name="userName" v-model:email="userEmail" />

Vill ni höra mer om Vue.js eller öka prestandan på er nuvarande hemsida? Kontakta oss idag så hjälper vi dig!