Vue.js 구성 요소에서 외부 JS 스크립트를 동적으로 로드하는 방법은 무엇입니까?

Vue.js 구성 요소에서 외부 JS 스크립트를 동적으로 로드

지불 게이트웨이로 작업할 때 거래를 촉진하는 외부 스크립트를 통합하는 것이 필요합니다. 그러나 초기 페이지 로드 시 이러한 스크립트를 로드하는 것은 바람직하지 않은 경우가 많습니다. Vue.js는 특정 구성 요소 내에서 외부 스크립트를 동적으로 로드하기 위한 솔루션을 제공합니다.

이를 달성하려면 Vue.js 구성 요소에서 Mounted() 수명 주기 후크를 활용하세요. Mounted() 후크는 구성 요소가 마운트되어 DOM에 삽입된 후에 실행됩니다. 이는 외부 스크립트를 조건부로 로드할 수 있는 이상적인 기회를 제공합니다.

Google ReCaptcha 스크립트를 동적으로 로드하는 다음 예를 고려해 보세요.

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

<script>
  export default {
    data: () => ({
      ...data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script');
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
      document.head.appendChild(recaptchaScript);
    },
    methods: {
      ...methods of your component
    },
  };
</script></code>

외부 스크립트 로딩 로직을 Mounted() 후크를 사용하면 구성 요소가 활성화될 때만 스크립트가 로드되도록 하여 페이지 성능을 유지하고 사용자 경험을 최적화합니다.

위 내용은 Vue.js 구성 요소에서 외부 JS 스크립트를 동적으로 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!