Vue에는 비동기 구성요소의 예가 있습니다.
- 亚连원래의
- 2018-06-15 11:29:211615검색
사용할 때만 필수 구성 요소를 로드하면 처음 페이지 로드 속도를 효과적으로 향상시킬 수 있다는 것은 누구나 알고 있습니다. 예를 들어 경로를 전환할 때 다음 기사에서는 간단한 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 === 'undefined' ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
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="['我是一个异步组件，','如果加载完成，','我就会在这里显示']"></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: '\
<ol>\
<li v-for="item in list">{{ item }}</li>\
</ol>',
props: {
list: Array
}
};main.js
var vm = new Vue( {
el: '#app',
components: {
/* 异步组件async-comp */
'async-comp': function () {
return {
/** 要渲染的异步组件，必须是一个Promise对象 */
component: new Promise( function ( resolve, reject ) {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = '/Async-Comp.js';
document.head.appendChild( script );
script.onerror = function () {
reject( 'load failed!' );
}
script.onload = function () {
if ( typeof async_comp !== 'undefined' )
resolve( async_comp );
else reject( 'load failed!' )
}
} ),
/* 加载过程中显示的组件 */
loading: {
template: '<p>loading...</p>'
},
/* 出现错误时显示的组件 */
error: {
template: '\
<p style="color:red;">load failed!</p>\
'
},
/* loading组件的延迟时间 */
delay: 10,
/* 最长等待时间，如果超过此时间，将显示error组件。 */
timeout:3200
}
}
}
} )위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
jquery에서 왼쪽 및 오른쪽 캐러셀 전환을 구현하는 방법
jquery를 사용하여 바닥 스크롤 효과를 구현하는 방법
데이터 할당을 얻는 방법 jQuery에서 페이지를 제공하세요
Three.js에서 3D 모델 디스플레이를 구현하는 방법
위 내용은 Vue에는 비동기 구성요소의 예가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!