Čím se nadchnout ve Vue 3.0

Tento příspěvek vás provede všemi novými funkcemi, na které se můžete těšit ve Vue 3.0, zatímco čekáme na velké vydání.

Vue.js

Vue.js, vytvořený Evanem You a 284+ komunitními milovníky, má více než 1,2 milionu uživatelů a je velmi progresivním rámcem pro vytváření uživatelských rozhraní. Skládá se z přístupné základní knihovny, která se zaměřuje pouze na vrstvu zobrazení, a ekosystému podpůrných knihoven, který vám pomůže řešit složitost velkých jednostránkových aplikací.

Zatímco čekáme na třetí verzi Vue, Evan You a tým Vue se účastní konferencí a šíří masivní povědomí o skvělých funkcích této verze, jejíž oficiální datum vydání bylo naplánováno již nějakou dobu na první čtvrtletí roku 2020.

Zde je pohled na některé z nejlepších funkcí přicházejících ve Vue 3.0:

Composition API

To se dříve nazývalo Function API a je to nový a mnohem lepší způsob zpracování logiky Vue, protože se týká organizování kódu v komponentách a opětovné použitelnosti kódu. Zpočátku, s Vue 2.x, přidáme logiku do našeho kódu vyplněním sekce vlastností volby komponenty. Tento přístup je známý jako model API možností. S tím využíváme data, vypočítaná, mixiny, metody a další.

Toto je dobrý způsob, jak definovat logiku, ale ne tak skvělý na kompilátorech pro přístup a shodu s naší logikou. Také se vždy musíte vypořádat s klíčovým slovem „toto“, když se pokoušíte získat přístup nebo odkazovat na věci, takže věcí, jako je kontrola typu, nebylo tak snadné dosáhnout. Kompoziční API to řeší.

Také pro opětovné použití kódu se získávání kódu z jedné komponenty do druhé běžně provádí pomocí slotů s rozsahem nebo mixinů ve Vue 2.x. Nyní však můžete použít čistě funkce JavaScriptu jako další způsob a poté je znovu použít přímo ve vašich komponentách Vue. To vede k použití mnohem méně kódu a také ke zkrácení doby kompilace. Syntaxe rozhraní API kompozice vypadá takto:

<script>
export default {
         setup() {
           return {
             apple(), ball(), cat()
           }
         }
       } 

function apple() { } 
function ball() { } 
function cat() { }
</script>

Přepis virtuálního DOM pro rychlejší a lepší výkon

Vue 3 je vysoce optimalizován pro rychlost, s téměř 100% zlepšením rychlosti oproti verzi 2. Aby to bylo možné, byl virtuální DOM přepsán, aby se drasticky zkrátila doba montáže a dokonce i záplatování. Pracovalo se také na generování slotů, aby se zajistilo, že závislosti jsou správně sledovány jejich instancemi. Také statické zvedání stromu dělá záplatování stromu ještě efektivnější pro rychlost.

Podpora TypeScript

S přijetím TypeScriptu, který se mezi vývojáři JavaScriptu stal velkou věcí, se podpora pro TypeScript stává důležitou pro všechny rámce. Vue zavedl podporu TypeScript ve verzi 2, ale slibuje, že to bude pokračovat, i když bude na palubě nové API pro kompozici. Věci jako generování nových projektů, které bez problémů využívají aktuální verzi TypeScript, je něco úžasného, ​​na co se můžete těšit.

Globální aktualizace rozhraní API pro montáž

Ve verzi 2.x používáme pro konfiguraci jakékoli aplikace Vue globální objekt Vue takto:

import Vue from ‘vue’   
import App from ‘./App.vue’   
Vue.config.ignoredElements = [/^app-/]   
new Vue({ render: h => h(App) }).$mount(‘#app’)

To vždy znamená, že jakékoli změny na objektu Vue ovlivní všechny součásti a instance aplikace. Ale v této nové verzi je místo toho omezena na specifikovanou aplikaci Vue, jako je createApp níže:

import { createApp } from ‘vue’  
import App from ‘./App.vue’   
const app = createApp(App)   
app.config.ignoredElements = [/^app-/]   
app.mount(‘#app’)

Takže věci jako změny v globálně definovaných mixinech iniciované externími řešeními by již v této verzi neovlivnily celou vaši aplikaci.

Aktualizace modelu V

Pokud používáte Vue, již víte, že V-modely se používají pro obousměrnou datovou vazbu na komponentách Vue. Ve Vue 2.x získáte jeden v-model pro jednu komponentu, ale v této nové verzi je skvělá zpráva!

Nyní můžete mít více deklarací a vazeb v-modelu na komponentu. Když jim umožníte přidělovat názvy vlastností, můžete jich mít tolik, kolik chcete.

Něco takového je nyní možné:

<SubscriptionForm  v-model:name="Name"  v-model:email="Email"/>

Fragmenty

Fragmenty jsou tagy obálky šablony používané ke strukturování vaší prezentace, aniž by měly jakýkoli dopad na vaši sémantiku. Stejně jako tag div, který se v prohlížeči nezobrazuje, ale lze jej upravit, slouží pouze k jednomu účelu – k zabalení obsahu. Fragmenty byly poprvé představeny v React 16 a Vue je nyní představilo také v jádru Vue. Již má plugin, který někteří vývojáři Vue používají.

Fragmenty jsou důležité, protože šablony Vue mohou mít pouze jednu značku, takže logika níže vrátí chybu syntaxe:

<template>   
 <div>Hello</div>   
 <div>World</div>   
</template>

Ale s fragmenty můžete zabalit divy do jednoho tagu, což by neovlivnilo strukturu ani vzhled a dojem z vaší prezentace. S Vue 2.x můžete instalovat fragmenty jako plugin, jako je tento:

import { Plugin } from "vue-fragments";Vue.use(Plugin);

A pak to použijte takto:

<template>
  <v-fragment>
    <div>Hello</div>
    <div>World</div>
  </v-fragment>
</template>

Portály

Portály jsou jakýmsi bezpečným kanálem pro vykreslení podřízených uzlů do uzlu DOM, který je mimo linii DOM rodiče, jako je způsob, jakým se vykreslují modály a vyskakovací okna. Normálně byste našli způsob, jak to pečlivě zvládnout pomocí CSS, ale rámce JavaScriptu, jako je React, poskytují portály v jádru. Toto bude nyní předdefinovaná funkce Vue verze 3. V současné době existuje portálová knihovna Vue pro používání portálů. Zde je rychlý pohled na knihovnu portal-vue pro Vue 2:

<portal to="destination">
  <p>This slot content will be rendered wherever the portal-target with name 'destination' is  located.</p>
</portal>

<portal-target name="destination">
  <!--  This component can be located anywhere in your App.  The slot content of the above portal component will be rendered here.  -->
</portal-target>

Toto přichází ve Vue Core od verze 3.

Aktualizace rozhraní API vlastních direktiv

Toto API se bude mírně lišit od současného, ​​na které jsou vývojáři Vue zvyklí:

const MyDirective = {
  bind(el, binding, vnode, prevVnode) {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {}
}

Nyní budou háčky životního cyklu komponent správně a intuitivně uspořádány tak, aby je snadno pochopili jak zkušení vývojáři Vue, tak i noví vývojáři Vue. Do budoucna by to mělo vypadat takto:

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
 // new  unmounted() {}
}

Toto je zlomová změna; s aktualizací to však snadno pokryje sestavení kompatibility.

Cesta vpřed:RFC

Pokud jste si před několika měsíci přečetli rozsáhlý blog o plánu plánu od Evana You, všimli jste si, že Vue 3 je nyní ve fázi RFC. Po spuštění interní zpětné vazby pro běhový prototyp verze 3 nyní existuje fórum pro žádosti o komentáře k možným funkcím a změnám. Proces „RFC“ (žádost o komentáře) má poskytnout konzistentní a řízenou cestu pro vstup nových funkcí do rámce Vue. Mnoho změn, včetně oprav chyb a vylepšení dokumentace, lze implementovat a zkontrolovat prostřednictvím běžného pracovního postupu žádosti o stažení GitHubu. Jediné, co musíte udělat, je zdokumentovat:

• Rozsah změny, kterou navrhujete.
• Důvody změny:co tím získáme a jaké kompromisy se dělají?
• Cesta upgradu:lze jej zavést zcela zpětně kompatibilním způsobem prostřednictvím odnímatelné vrstvy kompatibility nebo kódových modů?

Závěr

Toto je rychlý přehled některých funkcí, které budou dodávány s třetí verzí Vue.js. Vydání Alpha bude odesláno každým dnem. Tým ve Vue nadále zajišťuje, že každá verze bude rychlejší, jednodušší a efektivnější, a to je neuvěřitelně obdivuhodné. Jaká je vaše oblíbená nová funkce?