Na release Vue.js 3, ktorý by mal byť už za rohom, ešte stále čakáme, ale už teraz môžeme “ochutnať” niektoré featury z tejto aktualizácie. V dobe písania článku ide stále len o betu, čiže určite nie je odporúčané použiť najnovšiu verziu v produkcii. Pokiaľ si doteraz nesledoval novinky okolo Vue.js, prinášam ti článok, kde v stručnosti popíšem, čo nás v tejto aktualizácii čaká, a ako približne bude update vyzerať na strane nášho kódu.

V prvom rade ťa chcem upokojiť, pretože ak máš obavy z veľkého refaktoringu, tak podľa viacerých zdrojov by mali naše komponenty fungovať aj bez veľkého zásahu. Záleží, samozrejme, od toho, ako veľkých “prasačín” si sa pri ich písaní dopustil :). Tie najdôležitejšie zmeny sa udiali pod kapotou, preto ak nemáš zrovna túžbu po vedomosti, ako veci presne fungujú, stačí vedieť, že by malo byť Vue.js oveľa rýchlejšie, podstatne menšie a ľahšie udržiavateľné.

V skratke novinky v jadre knižnice:

• Reaktivita properties cez Proxy.
• Kompletný refaktoring Virtual DOM.
• Prepísanie kódu do Typescriptu.
• Udržiavateľnejší kód vďaka Monorepo.
• Menšia veľkosť výsledného bundlu, aj vďaka Tree-shakingu.

Features a zmeny, ktoré Vue.js 3 prinesie:

1. Vytvorenie Vue.js inštancie
V tomto prípade nejde o nejakú zásadnú zmenu, ale má svoje opodstatnenie hlavne pri projektoch s viacerými inštanciami. Nová inštancia sa po novom vytvorí metódou createApp a drobnou zmenou prešlo aj registrovanie komponentov a mount aplikácie.

Vue.js 2:

import Vue from "vue";
import App from "./App.vue";
 
new Vue({
  render: h => h(App)
}).$mount("#app");

Vue.js 3:

import { createApp } from "vue";
import App from "./App.vue";
 
const vApp = createApp(App)
 
vApp.use(/* plugin 1 name */);
vApp.use(/* plugin 2 name */);
vApp.mixin(/* mixin name */);
vApp.component(/* global component name */);
vApp.directive(/* directive name */);
vApp.mount("#app");

2. Viac root elementov v template
Aj keď to v mnohých prípadoch nebol veľký problém, viem si predstaviť, že pri určitých komponentoch (napríklad tabuľky) je potrebné mať viac root elementov. Síce sa kód často dal prepísať tak, aby bol len ten jeden root element, je super mať teraz možnosť viacerých rootov vďaka komponentu Fragment.

Vue.js 2:

<template>
  <div>
    <p>Počítadlo: {{ count }} </p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

Vue.js 3:

<template>
  <p>Počítadlo: {{ count }} </p>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>

3. Viac v-model properties
Property v-model sa používa na reaktívne dáta, najčastejšie pri formulároch. Vo Vue.js 3 už nebude problém definovať viacero v-model properties na jeden komponent.

<template>
  <div>
    <RegistrationForm
      v-model:name="name"
      v-model:email="email"
      v-model:phone="phone"
    />
  </div>
</template>

4. Teleport
Komponent pôvodne nazývaný “Portal” by mal byť známy hlavne React vývojárom. Z názvu je možné vyčítať, že ide o “teleportovanie” niečoho z miesta A na miesto B. V našom prípade z komponentu A do komponentu B. Čiže odpadá nutnosť presúvania dát cez Vuex, respektíve uľahčí sa práca napríklad s takými modálnymi oknami, keďže je možné vyrenderovať komplet DOM komponenty na úplne inom mieste.

// page.vue

<template>
  <div>
    <p>Obsah stránky</p>
 
    <Teleport to="#loginModalWindow">
      <div class="modal">
        Obsah modálneho okna
      </div>
    </Teleport>
  </div>
</template>

// LoginModalWindow.vue

<template>
  <div id="loginModalWindow"></div>
</template>

5. Composition API
Ide asi o najväčšiu a najdiskutovanejšiu zmenu v rámci novej verzie. V aktuálnej verzii zapisujeme dáta a metódy ako jeden veľký JSON objekt. Tento zápis sa volá Options API. Vo Vue.js 3 je tento zápis naďalej možný, ale ako bonus prišlo Composition API, ktoré je odpoveďou na kritiku ohľadom udržiavania kódu skrz viaceré komponenty. Dynamické a Computed dáta, jednotlivé metódy a hooky sa budú definovať v špeciálnej metóde setup.

<template>
  <div>
    <p>Počítadlo: {{ count }} </p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button> 
  </div> 
</template>
 
<script>
import { ref, onMounted } from "vue"
 
function useCounter() {
  const count = ref(0);
 
  function increment() { 
    count.value++; 
  }
 
  function decrement() { 
    count.value--; 
  }
 
  return {
    count,
    increment,
    decrement
  };
}
 
export default {
  setup() {
    const { count, increment, decrement } = useCounter();
 
    onMounted(() => console.log('component mounted!'))
 
    return {
      count,
      increment,
      decrement
    };
  }
}
</script>

6. Suspense
Ďalšia feature z React ekosystému užitočná hlavne pre asynchrónne komponenty. Suspense čaká s renderom na načítanie komponentu, alebo na splnenie určitej podmienky a ako fallback zobrazí loading element.

<template>
  <Suspense>
 
    <template #default>
      <div v-for="product in products" :key="product.id">
        <div class="product">
          <h2>{{ product.name }}</h2>
          <p>{{ product.description }}</p>
        </div>
      </div>
    </template>
 
    <template #fallback>
      Načítavanie...
    </template>
 
  </Suspense>
</template>
 
<script>
import axios from "axios";
 
export default {
  async setup() {
    let products = await axios.get("/products")
      .then(response => {
        return response.data.products
      });
 
    return {
      products
    };
  }
}
</script>

7. Filtre budú deprecated
Vďaka filtrom bolo možné veľmi jednoducho napríklad formátovať vypísané dáta, čo sa dalo využiť napríklad pri formátovaní cien. V porovnaní so štandardnými metódami nejde o žiadny rozdiel v performance. Odstránením filtrov sa chce zlepšiť reuse jednotlivých funkcií.

Vue.js 2:

<template>
  <div class="price">{{ product.price | formatPrice }}</div>
</template>
 
<script>
import formatPrice from "./filter/formatPrice";
 
export default {
  filter: {
    formatPrice
  }
}
</script>

Vue.js 3:

<template>
<div class="price">{{ formatPrice(product.price) }}</div>
</template>
 
<script>
import { useRefs } from "vue";
import formatPrice from "./filter/formatPrice";
 
export default {
  setup () {
    const data = {
      product: { id: 1, name: "Product", price: 10 }
    };
 
    return {
      ...useRefs(data),
      formatPrice
    };
  }
}
</script>

8. Event Bus bude deprecated
🙁

Ako písať komponenty vo Vue.js 3 už teraz?

Cez Vue CLI je vytvorenie Vue.js 3 aplikácie veľmi jednoduché:

• vue create app_name
• cd app_name
• vue add vue-next
• Upraviť package.json:

  ... "dependencies": { "core-js": "^3.6.4", "vue": "^3.0.0-beta.10" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.3.0", "@vue/cli-plugin-eslint": "~4.3.0", "@vue/cli-service": "~4.3.0", "@vue/compiler-sfc": "^3.0.0-beta.10", ...

  ... "dependencies": { "core-js": "^3.6.4", "vue": "^3.0.0-beta.10" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.3.0", "@vue/cli-plugin-eslint": "~4.3.0", "@vue/cli-service": "~4.3.0", "@vue/compiler-sfc": "^3.0.0-beta.10", ...

• npm install
• npm run serve

Ak rád testuješ nové veci, ďalšou možnosťou je použiť nový tool priamo od autora Vue.js, s názov Vite, ktorý ponúka bez použitia bundlera ultra rýchly dev server s Hot Module Replacement (HMR). Je primárne určený na vývoj Vue.js 3 komponentov, ale je možné ho používať aj pri vývoji komponentov napríklad pre React. A prečo použiť ďalší tool, keď pre .vue súbory je tu Vue CLI? CLI má pár nevýhod, napríklad nutnosť čakania na “vystavanie” celej aplikácie, než sa môže začať developovať a väčšie projekty trpia na pomalé HMR. Vite na rozdiel od CLI kompiluje len importovaný kód na aktuálnej stránke a aj HRM je podstatne rýchlejší.

A čo ešte čaká pôvodnú dvojkovú verziu? Počas tohto roku (cca Q3) vyjde jeden minor update na 2.7 a potom bude plynúť LTS 18 mesiacov. Čiže, ak sa rozhodneš neaktualizovať na novšiu verziu, nemôžeš očakávať nejakú novú, veľkú funkcionalitu. Critical security issues by mali byť fixované aj po uplynutí tejto doby. Ak ťa zaujíma, aké sú ďalšie plány, sleduj oficiálnu Vue.js roadmap na githube.

Ak nemáš záujem zatiaľ aktualizovať verziu Vue.js, alebo nechceš pracovať s aktuálne ešte stále nestabilnou verziou, niektoré novinky je možné veľmi ľahko pridať aj do aktuálnej verzie:

• package pre Composition API,
• package pre Teleport,
• package pre Fragmenty.

Ak máš záujem riešiť Vue.js aj ty, prečítaj si naše predošlé články zo série:

V prípade, že by si nám chcel pomôcť s vývojom ďalšej generácie nášho projektu RSHOP, alebo máš záujem sa od nás niečomu priučiť, neváhaj a ozvi sa nám. Ak náhodou na našej kariérnej stránke kariera.riesenia.com nenájdeš svoju vysnívanú poziciu, napíš nám priamo na e-mail [email protected] a radi ťa u nás privítame.