在Vue中有關於非同步組件的範例-js教程-PHP中文網

首頁

web前端

js教程

在Vue中有關於非同步組件的範例

亚连

Jun 15, 2018 am 11:29 AM

vue2 非同步組件

大家都知道使用時才裝入需要的元件，可以有效的提升首次裝入頁面的速度。例如在路由切換時，以下這篇文章主要為大家介紹了關於如何實現一個簡單的Vue非同步元件的相關資料，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考下。

前言

在大型應用程式中，我們可能需要將應用程式拆分為多個小模組，按需從伺服器下載。為了進一步簡化，Vue.js 允許將元件定義為一個工廠函數，非同步地解析元件的定義。 Vue.js 只在元件需要渲染時觸發工廠函數，並且把結果快取起來，用於後面的再次渲染。

為什麼需要非同步元件，道理和webpack的按需載入是一樣的，如果一開始就載入所有的元件，那麼是比較耗時的，所以我們可以將一些元件定義為非同步元件，在需要使用的時候再進行載入。

所以好處的話就顯而易見了：

按需加載，可以節省首次加載的時間，提高速度，也算是一個性能優化。
那麼一個元件可能會被使用多次，按需載入的話也不會載入多次，第一次載入完成就會快取下來，和webpack是一樣的，所以不用擔心

最近讀Vue文件的時候仔細看了一下非同步組件部分，第一次看的時候一臉懵逼，看第二次還是有點迷茫，第三次就有點感覺了，第四次感覺有點明白了，遂記錄一下，下面是我寫的一個簡單Vue異步組件Demo。

實例程式碼

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>

登入後複製

非同步元件Async-Comp.js，

注意，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
   }
  }
 }
} )

登入後複製

上面是我整理給大家的，希望今後會對大家有幫助。

在three .js中如何實作3D模型展示

以上是在Vue中有關於非同步組件的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1246

Related knowledge

vue2與vue3中的生命週期執行順序有何不同 May 16, 2023 pm 09:40 PM

vue2與vue3中生命週期執行順序區別生命週期比較vue2中執行順序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中執行順序setup=>onBefore>beforeDestroy=>destroyedvue3中執行順序setup=>onBefore>beforeDestroy=>destroyedvue3中執行順序setup=>onBefore> onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

快速搞懂Vue2 diff演算法（圖文詳解） Mar 17, 2023 pm 08:23 PM

diff演算法是一種透過同層的樹節點進行比較的高效演算法，避免了對樹進行逐層搜尋遍歷。那麼大家對diff演算法嗎有多少了解呢？以下這篇文章就來帶大家深入解析下vue2的diff演算法，希望對大家有幫助！

VUE3開發基礎：非同步元件的使用教學課程 Jun 15, 2023 pm 11:33 PM

Vue3是Vue.js最新的主要版本，與Vue2相比有許多新的功能和改進。其中一個最突出的改進之一是非同步組件的使用。在本文中，我們將深入探討Vue3中非同步組件的使用方法和技巧。什麼是非同步元件?在Vue中，元件可以透過import語句或require函數引入。這些組件被稱為同步組件，它們的程式碼在應用程式啟動時立即載入並編譯。但是，當應用程式變得越來越大

如何使用Vue的非同步元件和Webpack Code Splitting提升應用程式效能 Jul 17, 2023 pm 09:21 PM

如何使用Vue的非同步元件和WebpackCodeSplitting提升應用程式效能引言：隨著Web應用越來越複雜，頁面載入速度和效能成為了開發者關注的焦點。為了提升應用的效能，我們可以利用Vue的非同步元件和Webpack的CodeSplitting功能。這兩個功能結合起來可以幫助我們減少頁面載入時間，提升使用者體驗。本文將介紹如何使用Vue的非同步元件和Web

vue為啥要使用非同步組件 Dec 13, 2022 pm 07:11 PM

使用非同步元件的原因：1、非同步元件可以減少打包的結果，會將非同步元件分開打包，會採用非同步的方式載入元件，可以有效的解決一個元件過大的問題。 2.非同步元件的核心可以給元件定義變成函數，函數裡面可以用import語法，實作檔案的分割載入。

聊聊Vue2和Vue3中怎麼設定404介面 Feb 17, 2023 pm 02:25 PM

這篇文章帶大家進行Vue學習，聊聊Vue2和Vue3中設定404介面的方法，希望對大家有幫助！

一文詳解vue2如何實現帶有阻尼下拉加載功能 Feb 20, 2023 pm 12:07 PM

這篇文章為大家帶來了關於vue2的相關知識，其中主要跟大家聊一聊帶有阻尼下拉加載的功能是怎麼在vue2中實現的，感興趣的朋友下面一起來看一下吧，希望對大家有幫助。

如何透過Vue的非同步元件和Webpack的Lazy Loading提升應用效能 Jul 18, 2023 pm 04:42 PM

如何透過Vue的非同步元件和Webpack的LazyLoading提升應用效能隨著網路技術的發展，Web應用程式的效能最佳化一直是開發者關注的重點。在過去，針對Web應用的效能最佳化主要集中在前端資源的減少和後端介面的最佳化。然而，隨著Vue.js的流行，透過非同步元件和Webpack的LazyLoading可以進一步提升應用效能。 Vue是一個輕量級的Java

See all articles

在Vue中有關於非同步組件的範例

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題