요청 시 VueJS 구성 요소에 외부 JS 스크립트를 로드하는 방법은 무엇입니까?

요청 시 VueJS 구성 요소에 외부 JS 스크립트 로드

Vue.js 애플리케이션에서는 특정 구성 요소에 외부 JavaScript 스크립트가 필요한 시나리오가 발생할 수 있습니다. . 기본적으로 외부 스크립트는 index.html 파일에 추가되므로 해당 스크립트가 즉시 필요하지 않을 때 불필요한 로드가 발생할 수 있습니다.

이 문제를 해결하기 위해 Vue.js는 외부 스크립트를 동적으로 로드하는 편리한 방법을 제공합니다. 구성 요소 내의 스크립트를 사용하여 필요한 경우에만 사용할 수 있도록 합니다. 이 기술에는 Mounted() 수명 주기 후크 활용이 포함됩니다.

해결책:

다음 코드 조각은 다음을 사용하여 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-comComponent-fe10940af9e8

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