Vue 3 Tips & Tricks

<script lang="ts" setup>
  //Add business logic
</script>

Sådan overskriver du et reactive objekt

Som standard kan du ikke overskrive et helt reactive objekt, og hvis du gør det, mister du reaktiviteten.

<script lang="ts">
import { defineComponent, reactive, onMounted } from "vue";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    let myReactiveObject = reactive({
      name: "Nicky",
      age: "37",
      country: "DK",
    });

    let newObject = {
      name: "Nicky Christensen",
      age: "36",
      country: "DA-DK",
    };

    onMounted(() => {
      setTimeout(() => {
        //myReactiveObject = newObject //Wont work
        Object.assign(myReactiveObject, newObject) //Will work
      }, 2000)
    })

    return {
      myReactiveObject,
    };
  },
});
</script>

Tjek denne Codesandbox for at se det i aktion: https://codesandbox.io/s/lingering-http-ryf2bj?file=/src/components/HelloWorld.vue

Reactive CSS

En virkelig fantastisk ting i den nye version af Vue er, at du kan binde CSS direkte til dine variabler. Jeg har fundet dette super nyttigt i flere af de applikationer, jeg har bygget det seneste år.

........
const color = ref('#f000');<style>
.text {
  color: v-bind(color); 
}
</style>

Globale komponenter

Ind imellem vil vi gerne have komponenter, der er globalt tilgængelige, i stedet for at skulle importere dem hver gang vi har brug for dem.

Du kan nemt gøre dette ved at gå til din main.ts og gøre følgende:

import App from "./App.vue";
import MyGlobalSection from '@/components/MyGlobalSection.vue';

const app = createApp(App);

// Make our <MyGlobalSection /> component globally available.
app.component(MyGlobalSection.name, MyGlobalSection);

app.mount("#app");

Nu burde du kunne bruge komponenten globalt ved at skrive i templaten i de komponenter, hvor du vil bruge den globale komponent.

Composition API over Options API

Med Vue 3 har vi fået Composition API'et. Det er en virkelig fantastisk tilføjelse til Vue, og jeg vil argumentere for altid at vælge Composition API'et over Options API'et. En ting jeg elsker ved Composition API'et er, at jeg finder det mere fleksibelt at bruge, og jeg kan bruge composables, som anses for at være en erstatning for mixins. Virkelig kraftfuldt og en rigtig fed tilføjelse.

Er du interesseret i at lære mere om Composition API'et, så tjek denne video: https://www.youtube.com/watch?v=bwItFdPt-6M&ab_channel=Academind

Forbedr performance med v-once eller v-memo

Hvis du bekymrer dig om hurtig rendering, vil du måske bruge et af Vues indbyggede directives som v-once eller v-memo til at forbedre renderingsperformancen i din applikation.

v-once; bruges, hvis du vil rendere et element, men ikke have det til at være reaktivt, hvilket betyder, at det ikke indgår i fremtidige renderingscyklusser og derfor er "statisk". Du kan anvende v-once på flere elementer, såsom almindelige elementer, i en løkke eller på en komponent.

<template>
  <!-- single -->
  <p v-once>{{ someProperty }}</p>

  <!-- with children -->
  <div v-once>
    <p>{{ someProperty}}</p>
  </div>

  <!-- components -->
  <my-component v-once />

  <!-- v-for directives -->
  <li v-for="item in items" v-once>{{item}}</li>
</template>

v-memo; Kort sagt bruges v-memo til at memoize et undertræ af templaten — hvilket betyder, at det gemmer resultatet af tidligere renderinger for at fremskynde fremtidige. v-memo direktivet kan bruges på både elementer og komponenter. v-memo tager et array ind og vil kun re-rendere, hvis en af værdierne i arrayet ændrer sig.

<div v-memo="[valueA, valueB]">
  ...
</div>

Hvis valueA eller valueB ændrer sig, vil det opdatere. Vær dog opmærksom på, at v-memo ikke virker inde i en v-for løkke.

Asynkron indlæsning af komponenter

For at gøre din app mere performant og for at minimere dit main bundle, er det en god ide at lazy loade dine komponenter. I Vue 3 kan vi bruge defineAsyncComponent til at lazy loade en komponent. Det betyder, at komponenten først indlæses, når der er brug for den. Ved at bruge denne teknik kan du dramatisk forbedre indlæsningen af din applikation.

Den simpleste måde at definere en async komponent på kan gøres sådan:

import { defineAsyncComponent } from "vue";

// Lazy Load
const myComponent = defineAsyncComponent(() =>
  import("./components/myComponent.vue")
);

Hvis du har brug for det, kan du gøre endnu mere ved at sende et objekt til defineAsyncComponent:

const myComponent = defineAsyncComponent({
  loader: () => import("./myComponent.vue"),
  loadingComponent: myLoadingComponent /* shows while loading */,
  errorComponent: myErrorComponent /* shows if there's an error */,
  delay: 1000 /* delay in ms before showing loading component */,
  timeout: 3000 /* timeout after this many ms */,
});