El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem com treballar amb components dinàmics i asíncrons en Vue.js. Els components dinàmics permeten canviar el component que es mostra en funció de les dades o l'estat de l'aplicació, mentre que els components asíncrons permeten carregar components només quan són necessaris, millorant així el rendiment de l'aplicació.

Components dinàmics

Què són els components dinàmics?

Els components dinàmics són aquells que es poden canviar en temps d'execució. Això és útil quan necessitem mostrar diferents components en funció de l'estat de l'aplicació o de les dades que tenim.

Exemple bàsic de components dinàmics

Utilitzem la directiva component de Vue per renderitzar components dinàmics. Aquí teniu un exemple bàsic:

<div id="app">
  <button @click="currentComponent = 'component-a'">Component A</button>
  <button @click="currentComponent = 'component-b'">Component B</button>
  <component :is="currentComponent"></component>
</div>

Vue.component('component-a', {
  template: '<div>Component A</div>'
});

Vue.component('component-b', {
  template: '<div>Component B</div>'
});

new Vue({
  el: '#app',
  data: {
    currentComponent: 'component-a'
  }
});

Explicació del codi

HTML:
- Tenim dos botons que canvien el valor de currentComponent quan es fan clic.
- Utilitzem la directiva component amb l'atribut :is per renderitzar el component dinàmicament.
JavaScript:
- Definim dos components, component-a i component-b.
- Creem una nova instància de Vue amb una propietat data anomenada currentComponent que inicialment és component-a.

Exercici pràctic

Crea una aplicació Vue que tingui tres botons per canviar entre tres components diferents. Cada component ha de mostrar un missatge diferent.

Solució

<div id="app">
  <button @click="currentComponent = 'component-a'">Component A</button>
  <button @click="currentComponent = 'component-b'">Component B</button>
  <button @click="currentComponent = 'component-c'">Component C</button>
  <component :is="currentComponent"></component>
</div>

Vue.component('component-a', {
  template: '<div>Missatge del Component A</div>'
});

Vue.component('component-b', {
  template: '<div>Missatge del Component B</div>'
});

Vue.component('component-c', {
  template: '<div>Missatge del Component C</div>'
});

new Vue({
  el: '#app',
  data: {
    currentComponent: 'component-a'
  }
});

Components asíncrons

Què són els components asíncrons?

Els components asíncrons es carreguen només quan són necessaris. Això pot millorar el rendiment de l'aplicació, especialment si tenim components grans o complexos que no es necessiten immediatament.

Exemple bàsic de components asíncrons

Podem definir components asíncrons utilitzant la funció import de JavaScript:

Vue.component('async-component', function (resolve) {
  // Aquest component es carregarà només quan sigui necessari
  setTimeout(function () {
    resolve({
      template: '<div>Component Asíncron</div>'
    });
  }, 1000);
});

new Vue({
  el: '#app',
  template: '<async-component></async-component>'
});

Utilitzant `import` per a components asíncrons

Una manera més moderna i recomanada és utilitzar la funció import:

Vue.component('async-component', () => import('./AsyncComponent.vue'));

new Vue({
  el: '#app',
  template: '<async-component></async-component>'
});

Explicació del codi

Definició del component asíncron:
- Utilitzem la funció import per carregar el component només quan sigui necessari.
Instància de Vue:
- Renderitzem el component asíncron en la plantilla de Vue.

Exercici pràctic

Crea una aplicació Vue que carregui un component asíncron només quan es faci clic en un botó.

Solució

<div id="app">
  <button @click="loadComponent">Carregar Component Asíncron</button>
  <component :is="currentComponent"></component>
</div>

new Vue({
  el: '#app',
  data: {
    currentComponent: null
  },
  methods: {
    loadComponent() {
      import('./AsyncComponent.vue').then(component => {
        this.currentComponent = component.default;
      });
    }
  }
});

Retroalimentació sobre errors comuns

No oblidar el default en import: Quan utilitzem import per carregar components asíncrons, hem d'assegurar-nos d'accedir a component.default.
Gestió d'errors: És important gestionar errors en la càrrega de components asíncrons per evitar que l'aplicació es trenqui.

Conclusió

En aquesta secció, hem après com treballar amb components dinàmics i asíncrons en Vue.js. Els components dinàmics ens permeten canviar el component que es mostra en funció de l'estat de l'aplicació, mentre que els components asíncrons ens ajuden a millorar el rendiment carregant components només quan són necessaris. Aquests conceptes són fonamentals per construir aplicacions Vue.js eficients i escalables.

Components dinàmics i asíncrons