Vue에는 비동기 구성요소의 예가 있습니다.-JS 튜토리얼-php.cn

Vue에는 비동기 구성요소의 예가 있습니다.

亚连

풀어 주다： 2018-06-15 11:29:21

원래의

1561명이 탐색했습니다.

사용할 때만 필수 구성 요소를 로드하면 처음 페이지 로드 속도를 효과적으로 향상시킬 수 있다는 것은 누구나 알고 있습니다. 예를 들어 경로를 전환할 때 다음 기사에서는 간단한 Vue 비동기 구성 요소를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 기사에서는 샘플 코드를 통해 자세히 소개합니다.

머리말

대규모 애플리케이션에서는 애플리케이션을 여러 개의 작은 모듈로 분할하고 요청 시 서버에서 다운로드해야 할 수도 있습니다. 작업을 더욱 단순화하기 위해 Vue.js를 사용하면 구성 요소 정의를 비동기적으로 해결하는 팩토리 함수로 구성 요소를 정의할 수 있습니다. Vue.js는 구성 요소를 렌더링해야 할 때만 팩토리 기능을 트리거하고 후속 재렌더링을 위해 결과를 캐시합니다.

비동기식 구성요소가 필요한 이유는 웹팩의 온디맨드 로딩과 같습니다. 처음에 모든 구성요소를 로드하면 시간이 더 많이 걸리기 때문에 필요할 때 일부 구성요소를 비동기식 구성요소로 정의할 수 있습니다. 다시 로드하세요.

그러므로 이점은 분명합니다.

주문형 로딩은 첫 번째 로딩 시간을 절약하고 속도를 높일 수 있으며 이는 성능 최적화이기도 합니다.
그러면 구성 요소가 요청에 따라 여러 번 로드될 수 있으며, 첫 번째 로드가 완료된 후에는 캐시되지 않습니다.

최근에 Vue 문서를 읽을 때 비동기 구성 요소 부분을 주의 깊게 살펴보았습니다. 두 번째 읽을 때도 여전히 약간 혼란스러웠습니다. 세 번째는 느꼈고, 네 번째는 좀 더 명확해진 것 같아 녹음해 봤습니다. 다음은 제가 작성한 간단한 Vue 비동기 컴포넌트 데모입니다.

예제 코드

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport"
   content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
   content="ie=edge">
  <title>Document</title>
  <script>
   // 如果浏览器不支持Promise就加载promise-polyfill
   if ( typeof Promise === &#39;undefined&#39; ) {
    var script = document.createElement( &#39;script&#39; );
    script.type = &#39;text/javascript&#39;;
    script.src = &#39;https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js&#39;;
    document.head.appendChild( script );
   }
  </script>
  <!-- 引入Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
 <body>
  <p id="app" style="font-size: 22px">
   <!-- 异步组件async-comp -->
   <async-comp :list="[&#39;我是一个异步组件，&#39;,&#39;如果加载完成，&#39;,&#39;我就会在这里显示&#39;]"></async-comp>
  </p>

  <!-- 引入main.js  -->
  <script src="/main.js"></script>
 </body>
</html>

로그인 후 복사

Asynchronous 컴포넌트 Async-Comp.js,

Note, Async-Comp.js는 index.html에서 참조되지 않지만 동적으로 로드됩니다. 아래 main.js에 있습니다.

window.async_comp = {
 template: &#39;\
  <ol>\
   <li v-for="item in list">{{ item }}</li>\
  </ol>&#39;,
 props: {
  list: Array
 }
};

로그인 후 복사

main.js

var vm = new Vue( {
 el: &#39;#app&#39;,
 components: {
  /* 异步组件async-comp */
  &#39;async-comp&#39;: function () {
   return {
    /** 要渲染的异步组件，必须是一个Promise对象 */
    component: new Promise( function ( resolve, reject ) {
     var script = document.createElement( &#39;script&#39; );
     script.type = &#39;text/javascript&#39;;
     script.src = &#39;/Async-Comp.js&#39;;
     document.head.appendChild( script );
     script.onerror = function () {
      reject( &#39;load failed!&#39; );
     }

     script.onload = function () {
      if ( typeof async_comp !== &#39;undefined&#39; )
       resolve( async_comp );
      else reject( &#39;load failed!&#39; )
     }
    } ),
    /* 加载过程中显示的组件 */
    loading: {
     template: &#39;<p>loading...</p>&#39;
    },
    /* 出现错误时显示的组件 */
    error: {
     template: &#39;\
      <p style="color:red;">load failed!</p>\
     &#39;
    },
    /* loading组件的延迟时间 */
    delay: 10,
    /* 最长等待时间，如果超过此时间，将显示error组件。 */
    timeout:3200
   }
  }
 }
} )

로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.