如何在VueJS元件中按需載入外部JS腳本？

在VueJS 元件中按需載入外部JS 腳本

在Vue.js 應用程式中，可能會遇到特定元件需要外部JavaScript腳本的場景。預設情況下，外部腳本會新增到index.html檔案中，當不立即需要這些腳本時，這可能會導致不必要的載入。

為了解決這個問題，Vue.js提供了一種動態載入外部腳本的便捷方法元件內的腳本，確保它們僅在必要時可用。此技術涉及利用 Mounted() 生命週期掛鉤。

解決方案：

以下程式碼片段示範如何使用Vue.js 元件在Vue.js 元件中載入外部腳本Mounted() 鉤子：

<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-Uosukainen 的文章：https： //medium.com/@lassiuosukainen/how-to -include-a-script-tag-on-a-vue-component-fe10940af9e8

以上是如何在VueJS元件中按需載入外部JS腳本？的詳細內容。更多資訊請關注PHP中文網其他相關文章！