外部 JS スクリプトを VueJS コンポーネントにオンデマンドでロードするにはどうすればよいですか?

オンデマンドで VueJS コンポーネントに外部 JS スクリプトをロードする

Vue.js アプリケーションでは、特定のコンポーネントが外部 JavaScript スクリプトを必要とするシナリオが発生する場合があります。 。デフォルトでは、外部スクリプトはindex.html ファイルに追加されるため、それらのスクリプトがすぐに必要でない場合に不必要なロードが発生する可能性があります。

この問題に対処するために、Vue.js は外部スクリプトを動的にロードする便利な方法を提供します。コンポーネント内のスクリプトを使用して、必要な場合にのみ使用できるようにします。この手法には、mounted() ライフサイクル フックの利用が含まれます。

解決策:

次のコード スニペットは、 mount() フック:

<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>

利点:

• 選択的読み込み: コンポーネントがマウントされている場合にのみ外部スクリプトが読み込まれます。 、パフォーマンスを最適化します。
• モジュール性: 外部スクリプトが個別にロードされるため、コンポーネントは独立したままにすることができます。
• パフォーマンスの向上: にスクリプトをロードすることにより、

ソース例:

このソリューションは、Lassi Iso-Uoskainen の記事を基にしています: https: //medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

以上が外部 JS スクリプトを VueJS コンポーネントにオンデマンドでロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。