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

집

웹 프론트엔드

JS 튜토리얼

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

亚连

Jun 15, 2018 am 11:29 AM

vue2비동기식 구성 요소

사용할 때만 필수 구성 요소를 로드하면 처음 페이지 로드 속도를 효과적으로 향상시킬 수 있다는 것은 누구나 알고 있습니다. 예를 들어 경로를 전환할 때 다음 기사에서는 간단한 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
   }
  }
 }
} )

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

관련 기사

vue2与vue3中的生命周期执行顺序有什么区别May 16, 2023 pm 09:40 PM

vue2与vue3中生命周期执行顺序区别生命周期比较vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>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为啥要使用异步组件Dec 13, 2022 pm 07:11 PM

使用异步组件的原因：1、异步组件可以减少打包的结果，会将异步组件分开打包，会采用异步的方式加载组件，可以有效的解决一个组件过大的问题。2、异步组件的核心可以给组件定义变成一个函数，函数里面可以用import语法，实现文件的分割加载。

如何使用Vue的异步组件和Webpack Code Splitting提升应用性能Jul 17, 2023 pm 09:21 PM

如何使用Vue的异步组件和WebpackCodeSplitting提升应用性能引言：随着Web应用越来越复杂，页面加载速度和性能成为了开发者关注的焦点。为了提高应用的性能，我们可以利用Vue的异步组件和Webpack的CodeSplitting功能。这两个功能结合起来可以帮助我们减少页面加载时间，提升用户体验。本文将介绍如何使用Vue的异步组件和Web

如何通过Vue的异步组件和Webpack的Lazy Loading提升应用性能Jul 18, 2023 pm 04:42 PM

如何通过Vue的异步组件和Webpack的LazyLoading提升应用性能随着互联网技术的发展，Web应用程序的性能优化一直是开发者关注的重点。在过去，针对Web应用的性能优化主要集中在前端资源的减小和后端接口的优化上。然而，随着Vue.js的流行，通过异步组件和Webpack的LazyLoading可以进一步提升应用性能。Vue是一个轻量级的Java

聊聊Vue2和Vue3中怎么设置404界面Feb 17, 2023 pm 02:25 PM

本篇文章带大家进行Vue学习，聊聊Vue2和Vue3中设置404界面的方法，希望对大家有所帮助！

vue中异步组件和动态组件的区别是什么Aug 26, 2022 pm 06:32 PM

区别：1、动态组件是Vue中一个特殊的Html元素“<component>”，它拥有一个特殊的is属性，属性值可以是“已注册组件的名称”或“一个组件的选项对象”；而异步组件不是实物，是一个概念，一个可以让组件异步加载的方式。2、动态组件用于不同组件之间进行动态切换；而异步组件用于性能优化，比如减小首屏加载时间、加载资源大小。

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.