Home > Article > Web Front-end > There are examples of asynchronous components in Vue

There are examples of asynchronous components in Vue

亚连Original: 2018-06-15 11:29:211529browse

Everyone knows that loading the required components only when used can effectively improve the speed of loading the page for the first time. For example, when switching routes, the following article mainly introduces you to the relevant information on how to implement a simple Vue asynchronous component. The article introduces it in detail through sample code. Friends who need it can refer to it.

Preface

In large applications, we may need to split the application into multiple small modules and download them from the server on demand. To simplify things even further, Vue.js allows you to define a component as a factory function that resolves the component definition asynchronously. Vue.js only triggers the factory function when the component needs to be rendered, and caches the results for subsequent re-rendering.

Why asynchronous components are needed? The reason is the same as webpack's on-demand loading. If all components are loaded at the beginning, it will be more time-consuming, so we can define some components as asynchronous components. Load it when needed.

So the benefits are obvious:

Loading on demand can save the time of first loading, increase the speed, and is also a performance optimization. .
Then a component may be used multiple times. If it is loaded on demand, it will not be loaded multiple times. It will be cached after the first load is completed, which is the same as webpack, so Don’t worry

When I was reading the Vue documentation recently, I took a closer look at the asynchronous component part. The first time I read it, I was confused. The second time I read it, I was still a little confused. The third time I read it, I was a little confused. I got a feel for it, and I felt it was clearer the fourth time, so I recorded it. The following is a simple Vue asynchronous component Demo I wrote.

Example code

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 component Async-Comp.js,

Note, Async-Comp.js is not referenced in index.html, but is dynamically loaded in main.js below.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement positioning navigation using jquery

How to implement left and right carousel switching in jquery

How to achieve floor scrolling effect using jquery

How to get data and assign it to the page in jQuery

In three How to implement 3D model display in .js

The above is the detailed content of There are examples of asynchronous components in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How webpack packages js and css filesNext article：How webpack packages js and css files

See more

There are examples of asynchronous components in Vue

Related articles