Wie lade ich externe JS-Skripte bei Bedarf in VueJS-Komponenten?

Externe JS-Skripte in VueJS-Komponenten bei Bedarf laden

In Vue.js-Anwendungen können Sie auf Szenarien stoßen, in denen bestimmte Komponenten externe JavaScript-Skripte erfordern . Standardmäßig werden externe Skripte zur Datei index.html hinzugefügt, was zu unnötigem Laden führen kann, wenn diese Skripte nicht sofort benötigt werden.

Um dieses Problem zu beheben, bietet Vue.js eine praktische Möglichkeit, externe Skripte dynamisch zu laden Skripte innerhalb von Komponenten, um sicherzustellen, dass sie nur bei Bedarf verfügbar sind. Bei dieser Technik wird der Lebenszyklus-Hook mount() verwendet.

Lösung:

Der folgende Codeausschnitt zeigt, wie ein externes Skript innerhalb einer Vue.js-Komponente mithilfe von geladen wird mount() Hook:

<code class="html"><template>
  ... your HTML
</template>

<script>
  export default {
    data: () => ({
      ... data for your component
    }),
    mounted() {
      let externalScript = document.createElement('script')
      externalScript.setAttribute('src', 'https://example.com/external-script.js')
      document.head.appendChild(externalScript)
    },
    methods: {
      ... methods for your component
    }
  }
</script></code>

Vorteile:

• Selektives Laden: Externe Skripte werden nur geladen, wenn die Komponente gemountet ist, wodurch die Leistung optimiert wird .
• Modularität: Komponenten können unabhängig bleiben, ebenso wie die externen Skripte werden separat geladen.
• Verbesserte Leistung:Durch das Laden von Skripten bei Bedarf vermeiden Sie eine unnötige Aufblähung der Seitenladezeit.

Beispielquelle:

Diese Lösung wurde aus einem Artikel von Lassi Iso-Uosukainen übernommen: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

Das obige ist der detaillierte Inhalt vonWie lade ich externe JS-Skripte bei Bedarf in VueJS-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!