Van een javascript bibliotheek naar een framework, de reis van Vue is indrukwekkend, vooral als je bedenkt hoe het nog steeds zijn lichtgewicht karakter behoudt. Er zijn verschillende functies die Vue3 biedt, waaronder Pinia, dat eenvoudiger toestandsbeheer mogelijk maakt, evenals een build toolchain die werkt op Vite. Of je nu je apps wilt updaten naar Vue3 of gewoon wilt experimenteren met het framework, we hebben alles wat je moet weten over Vue3 hier verzameld!
Wat is Vue3?
Voordat we ingaan op de veranderingen die je zult zien in Vue3, laten we eerst eens kijken naar wat Vue.js en zijn kerncomponenten zijn:
Vue
Vue.js is een open-source front-end JavaScript framework dat gebruikt kan worden om gebruikersinterfaces te creëren. Het framework biedt een declaratieve en componentgebaseerde coderingsaanpak die helpt bij de snelle ontwikkeling van gebruikersschermen. Het kan worden gebruikt om eenvoudige of ingewikkelde interfaces te ontwikkelen en is gebouwd bovenop industriestandaard HTML, CSS en JavaScript. De redenen voor de populariteit en grote gebruikersbasis van Vue.js is de programmeursvriendelijke syntaxis, het gebruiksgemak en de goed gedefinieerde documentatie.
Zoals hierboven vermeld, is Vue.js gebouwd op twee kerneigenschappen:
Declaratieve rendering stelt de gebruiker in staat om HTML-uitvoer declaratief te definiëren, afhankelijk van de JavaScript-status. Vue.js breidt normale HTML uit met behulp van template syntax.
Reactiviteit - Vue.js monitort actief de JavaScript-status, en wanneer deze wordt gewijzigd, wordt het DOM snel ververst.
Vue3.0
Engineers die Vue 2 gebruiken om te coderen moeten nu updaten naar Vue3. Het heeft namelijk nieuwe mogelijkheden die het ontwerpen van leesbare, consistente componenten veel gemakkelijker maken en betere methoden om onze applicaties te organiseren. Vue3 is gebruiksvriendelijker, korter en eenvoudiger te onderhouden. Enkele opvallende kenmerken van Vue3 zijn Teleport, Fragments, en meerdere v-modellen.
De nieuwste versie heeft ook de filters afgeschaft en heeft state-driven CSS-variabelen en een experimentele suspense-functie. Het heeft ook lifecycle naamgeving wijzigingen en single file component wijzigingen.
Is Vue3 uitgebracht?
De nieuwste versie van Vue beschikbaar - Vue3, werd aanvankelijk aangekondigd medio 2018 en officieel uitgebracht in september 2020. Vue3.0 werd op 7 februari 2022 uitgeroepen als de officiële standaardversie van het progressieve javascript-framework.
Wat is er nieuw in Vue3?
De meest opwindende veranderingen om naar uit te kijken in Vue3 zijn:
Verstrekken/injecteren
Met Vue 2 konden gebruikers gegevens zoals strings, arrays, objecten en meer doorgeven via props in code. Dergelijke gegevens konden gemakkelijk worden doorgegeven van een parent element naar zijn child elementen. Het gebruik van props maakte het echter moeilijker om data van het parent element naar een diep genest child element te sturen. Daardoor moesten ontwikkelaars de Vuex Store en Event Hub gebruiken. Vue 2.2.0 bevatte ook provide/inject, maar het werd afgeraden om het in de algemene programmacode te gebruiken.
Echter, door de verbeterde provide/inject combo in Vue3 te gebruiken, kunnen we sneller en netter data doorgeven. Zoals de naam al aangeeft, gebruiken we provide om gegevens toegankelijk te maken van een parent element naar elk van zijn kind-componenten, ongeacht hoe diep die kind-elementen genest zijn. Hier kunnen we provide gebruiken als objecten of als functies.
Teleport
Op basis van de logica van de app die je wilt bouwen, kunnen je componenten worden getoond op plaatsen die anders zijn dan waar je ze wilt weergeven. U wilt bijvoorbeeld een popup maken die moet verschijnen en het hele scherm in beslag moet nemen. Om dit te ondervangen kunnen we het positie-attribuut van dergelijke componenten in CSS gebruiken, maar met Vue3 kunnen ontwikkelaars ook Teleport gebruiken.
Met Teleport kunnen programmeurs een element uit zijn oorspronkelijke container halen waarin het is gewikkeld en het verplaatsen naar een reeds bestaand component op de pagina waar het in gebruik is. Je kunt bijvoorbeeld een header-element verplaatsen van de div #app naar de header. Onthoud dat je Teleport alleen kunt gebruiken om elementen te verplaatsen naar componenten van code die buiten het Vue DOM bestaan.
Fragmenten
Het is in Vue 2 moeilijk om meerdere hoofdcomponenten in de template van een bestand te hebben. Programmeurs begonnen alle componenten in te sluiten in een parent component als oplossing voor hetzelfde. Soms moeten programmeurs een element renderen zonder een container eromheen.Engineers kunnen nu meerdere items in hun root template bestand hebben dankzij Fragments, wat een feature is die is toegevoegd aan Vue3.
Globale Vue API
Je hebt misschien vaak de Vue.component of Vue.use gevonden in het main.js bestand van een Vue app. Ze worden Global API's genoemd, en er zijn veel van dergelijke methoden in Vue 2. Als je meerdere instanties van je app hebt, worden ze allemaal bovenop Vue geplaatst. Het is moeilijk om specifieke functionaliteit te beperken tot een enkele applicatie-instantie.
Vue3 lost dit probleem op door de introductie van een nieuwe globale API genaamd createApp. Met deze methode kunt u een nieuwe instantie van een Vue-applicatie verkrijgen. Alle Vue 2.x-gerelateerde API's worden overgebracht naar afzonderlijke app instanties. Hierdoor kan elke instantie van je applicatie functies hebben die exclusief zijn voor die instantie, zonder andere instanties te verstoren die al in gebruik zijn.
Gebeurtenissen API
Naast het gebruik van de Vuex Store is het gebruik van Event Bus een van de meest populaire methoden die programmeurs hebben gebruikt voor het doorgeven van gegevens tussen elementen die geen ouder-kind context delen. Codes als $on, $off en $once zijn echter allemaal verwijderd in Vue3. Maar $emit is nog steeds toegankelijk omdat child elementen events moeten uitzenden naar hun parent elementen. Een oplossing hiervoor zou zijn om provide/inject te gebruiken.
Vite-aangedreven build toolchain
Ontworpen door Evan You, de maker van Vue, is Vite een top-notch Vue SFC support toolchain die lichtgewicht en snel te maken is. Vite is nu de motor achter de standaard Vue3 build configuratie. De modulebundelaar @vue-cli/service, die gebouwd is bovenop webpack, zal uw hele Vue-applicatie inpakken bij de lancering, hot reloads en compilatie. Vite, aan de andere kant, zal de ES Import syntax uit uw programmacode halen en de browser elke import laten analyseren alvorens een HTTP-verzoek te versturen.
De verandering wordt vooral doorgevoerd om redenen van snelheid. De server start onmiddellijk omdat hij gebruik maakt van native browserondersteuning voor JavaScript-componenten en is veel sneller.
Samenstelling API syntaxis
De Options API werd gebruikt voor het creëren van element states en logica. De Composition API werd door Vue3 gelanceerd als vervanging voor hetzelfde. Het is slechts een verzameling API's die ons in staat stelt om Vue-elementen te creëren zonder opties te definiëren door geïmporteerde methodes te gebruiken.
De Composition API bevat de volgende API's:
Reactivity API - Bijvoorbeeld ref() en reactive(). Hiermee kunnen reactive state, calculated state en watchers direct gebouwd worden.
Lifecycle hooks - Bijvoorbeeld, onMounted() en onUnmounted(). We kunnen inhaken op de levenscyclus van elementen met behulp van lifecycle hooks.
Dependency injection - Bijvoorbeeld provide() en inject(). Het gebruik van Vue's afhankelijkheidsinjectiesysteem met Reactivity API's wordt mogelijk gemaakt door afhankelijkheidsinjectie.
Voordelen van het gebruik van composition API's
De belangrijkste voordelen van het gebruik van Composition API's ten opzichte van de Options API zijn:
- Een element is met Vue3 niet meer nodig om een reactieve toestand te genereren.
- Bij het toevoegen van talrijke reactieve attributen kan de setup in Vue.js elementen opgeblazen worden. Het kan daarom nuttig zijn om deze reactieve variabelen te abstraheren in aparte javascript bestanden.
- Het belangrijkste voordeel van de Composition API is dat het het mogelijk maakt om duidelijke, effectieve logica te hergebruiken in de vorm van Composable methods. Het adresseert alle problemen met mixins, de belangrijkste methode voor hergebruik van logica in de Options API.
- U kunt code typen in de Composition API met volledige type-inferentie.
- De programma's die u schrijft in de Composition API zijn efficiënter, en de namen van de variabelen kunnen kleiner worden gemaakt. Dit vermindert de overhead.
- U kunt uw programmacode beter delen met Composition API.
Pinia
Pinia is een lichtgewicht state management tool voor Vue.js. Het stelt ons in staat om een toestand te delen tussen elementen en pagina's. Het creëert een gebruiksvriendelijk, volledig getypeerd state management framework dat gebruik maakt van het nieuwe reactiviteitsconcept in Vue3. Dit is nu Vue3's nieuwe standaardbibliotheek voor toestandsbeheer.
Pinia diende aanvankelijk als een onderzoek naar het potentieel van Vuex. Lange tijd was Vuex het voorgestelde toestandsbeheersysteem voor Vue, maar met Vue3 is Pinia het aanbevolen systeem voor toestandsbeheer in de officiële documentatie. Momenteel is Vuex in onderhoudsmodus. Hoewel het blijft functioneren, zullen er geen nieuwe functies worden toegevoegd. Gebruik van Pinia wordt geadviseerd voor verse apps.
Waarom Pinia?
Pinia is zeer licht, met een gewicht van slechts 1KB. Bovendien integreert het met de Vue.js dev tools om uw codeerervaring in Vue 2 en Vue3 te verbeteren. Omdat Pinia al uw datatypes induceert, kan het u ook volledige en nauwkeurige auto-aanvulling in javascript bieden. Pinia is ook modulair opgebouwd, gebruiksvriendelijk en uitbreidbaar. Over het geheel genomen lijkt Pinia lichtgewicht, ongecompliceerd en ongecompliceerd. Het lijkt sterk op het omgaan met elementen en bevat alle tools die nodig zijn voor dynamisch programmeren in Vue3.
Wordt Vue 2 afgeschreven?
De laatste kleine update voor Vue 2 was Vue 2.7, die werd uitgebracht in juli 2022. Vue 2 staat momenteel in onderhoudsmodus. Hoewel er geen extra functies worden verscheept, krijgt het nog 18 maanden lang cruciale bugfixes en beveiligingspatches. Eind 2023 zal Vue 2 worden afgeschreven.
Migratie van Vue 2
Op basis van uw software is overstappen naar Vue3 misschien niet de moeite waard als u werkt aan een extreem groot project met Vue 2. Gebruik Vue3 als efficiëntieproblemen blijven bestaan ondanks uw beste pogingen tot optimalisatie.
Of u uw applicatie wilt migreren naar Vue3 hangt af van de grootte en complexiteit ervan. De meeste syntaxis en technieken in Vue 2 zijn hetzelfde als in Vue3. Echter, als je een aantal van de hierboven genoemde veranderingen wilt gebruiken, dan is migreren een beter idee.
Vue.js in AppMaster project
Het AppMaster platform gebruikt het VueJS framework, of beter gezegd de derde versie van het framework, om een front-end applicatie te maken voor onze gebruikers. Vue 3 wordt gebruikt om admin, panels en client portals te maken, en de hele interface van AppMaster studio is eigenlijk ook gemaakt met behulp van het VueJS framework.
We gebruiken een speciale aanpak, micro-frontends of front-end microservices genaamd, om ons product snel en efficiënt te kunnen ontwikkelen; elke datamodel editor en business process editor is bijvoorbeeld een volledig aparte front-end applicatie in ons platform. Hierdoor kunnen we zeer snel en onafhankelijk van het ontwikkelteam ontwikkelen, wat de algehele snelheid van ons product verhoogt. Al deze voordelen kunnen onze klanten halen uit onze toepassingen.
In de toekomst zullen we, naast de SPA-modus voor eenmalige toepassingen, de SSR-modus (server-side rendering) toevoegen, waardoor onze klanten niet alleen admin-panelen en aangepaste portalen kunnen creëren, maar ook volledig functionele websites met een zeer hoge SEO-optimalisatie.
Over no-code
Een van de belangrijkste elementen die de democratisering van het coderen beïnvloeden is de no-code ontwikkelingsaanpak. Tegenwoordig heeft een groter aantal mensen toegang tot programmeren in het algemeen zonder codering. Het maakt webdesign, de ontwikkeling van mobiele toepassingen en responsieve webontwikkeling eenvoudiger.
AppMaster is een van de toepassingen die kan worden gebruikt voor het automatisch creëren van broncode. U kunt de code op elk moment bekijken en inspecteren. Met AppMaster heeft u de mogelijkheid om projectinformatie aan te passen met behulp van computertaal. Ook kunt u de code exporteren als u dat wilt. Dit is een garantie dat je met AppMaster volledige controle en eigendom hebt over de applicatie waaraan je werkt.
Conclusies
Als u een meer gedetailleerde uitleg wilt over hoe Vue3 verschilt van Vue 2, samen met code snippets, kunt u de officiële Vue.js documentatie doornemen. We hebben de meeste grote veranderingen genoemd waarvan je je bewust moet zijn. Het is belangrijk dat je op de hoogte blijft van updates van Vue3 als je geïnteresseerd bent in het bouwen van applicaties met dit framework.
