Nuxt3-Learning Road 11, Komponenten-Dynamisches Laden und Lazy Loading

Machen Sie es sich zur Gewohnheit, gemeinsam zu schreiben! Dies ist der 11. Tag meiner Teilnahme an der „Nuggets Daily New Plan · April Update Challenge“, klicken Sie hier, um die Details der Veranstaltung anzuzeigen .

Nuxt3-Learning Road 11, Komponenten-Dynamisches Laden und Lazy Loading

Einleitung

Diese Serie wird Nuxt3 mit einem meiner Verständnisse vorstellen und mit dem Erlernen beginnen .

In der Mitte füge ich die chaotischen Wissenspunkte .

Komponenten

Das Komponentenkonzept von Nuxt3 ähnelt dem Komponentenkonzept von Vue , aber Nuxt3 hat auch eine große Funktion, nämlich Lazy Loading .

faules Laden

Lazy Loading ist meines Erachtens kein Fremdwort, sondern einer der zuverlässigsten Helfer bei unserer Performance-Optimierung.

Aber was ist Lazy Loading von Nuxt3- Komponenten ? Gibt es wirklich Lazy Loading?

Sehen Sie sich hier den offiziellen Code an

<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>
复制代码

Können Sie Lazy Loading von hier aus sehen?

Es fühlte sich für mich nicht so an, wie ich es mir vorgestellt hatte. Dies ist ein v-if , um die Wiedergabe der Komponente Acridin zu steuern

Ich verstehe das faule Laden von Nuxt3- Komponenten nicht ganz, und die Studenten, die sich treffen, werden auch hoffen, eine gute Antwort zu geben.

dynamisches Laden

Dynamisches Laden von Bauteilen, das ist noch sehr praktisch. Die Verwendung ähnelt der dynamischen Komponentenverwendung in Vue3.

Es sollte jedoch beachtet werden, dass wir, wenn wir eine Komponente einführen und sie einer Variablen zuweisen, diese Api mit dem Namen resolveComponent übergeben müssen, die in Vue3 bereitgestellt wird .

const TheHeader = resolveComponent('TheHeader')
const TheHeader = resolveComponent('the-header')
复制代码

Beachten Sie, dass die Benennung streng ist. Es wird empfohlen, die obige zu verwenden, die sicherer ist und nicht so leicht Fehler macht.

Folgendes wird <component :is="xxx" />verwendet , um Komponenten dynamisch zu laden.

Fügen Sie den relevanten Code direkt auf der Seite default.vue hinzu

<template>
    <div>
      <h2>使用 动态加载</h2>
      <button @click="onChange">切换</button>
      <component :is="currentComponent" />
    </div>
</template>
<script setup>
    const TheHeader = resolveComponent('TheHeader')
    const TheFooter = resolveComponent('TheFooter')

    const flag = ref(false)
    const currentComponent = shallowRef(TheHeader)

    const onChange = () => {
      flag.value = !flag.value
      currentComponent.value = flag.value ? TheHeader : TheFooter
    }
</script>
复制代码

Hier sehen Sie, dass ich eine shallowRef verwendet habe. Ich habe am Anfang ref verwendet , aber es wird nicht empfohlen. Hier verwende ich die API von shallowRef .

Die allgemeine Bedeutung des Codes besteht darin, die TheHeader- Komponente standardmäßig anzuzeigen, aber durch Klicken auf die Umschaltfläche wird die Komponente geändert. Angepasst an TheFooter diese Komponente. Gesteuert durch die Variable flag

Klicken Sie auf die Umschaltfläche

Zusammenfassen

Gelernte Nuxt3- Komponenten - dynamische Komponenten und verzögertes Laden. Es ermöglicht uns, die Verwendung verschiedener Komponenten auf der Seite flexibler zu steuern, die Effizienz der Entwicklung zu verbessern und mit komplexen interaktiven Szenarien umzugehen.