Async 구성 요소로 VUE 앱의 성능을 최적화하십시오.
- Lisa Kudrow원래의
- 2025-02-14 10:00:13629검색
.
Async 구성 요소가로드하는 데 시간이 걸리거나로드에 실패 할 때 로딩 및/또는 오류 구성 요소를 정의 할 수 있습니다. 로딩 애니메이션 또는 오류 메시지를 표시하는 데 유용 할 수 있습니다.
처음부터 vue.js를 배우고 싶습니까? itepoint 프리미엄을 사용하여 기초, 프로젝트, 팁 및 도구 등을 다루는 Vue 책 전체를 구입하십시오. 월 $ 14.99에 가입하십시오
- .
-
이 자습서를 따르려면 vue.js에 대한 기본적인 이해가 필요합니다.
Async 구성 요소 비동기 구성 요소를 만들기 전에 구성 요소를 일반적으로로드하는 방법을 살펴 보겠습니다. 그렇게하려면 매우 간단한 메시지 구성 요소를 사용합니다. -
이제 구성 요소를 생성 했으므로 App.Vue 파일에로드하여 표시하겠습니다. 구성 요소를 가져 와서 구성 요소 옵션에 추가하여 템플릿에서 사용할 수 있습니다.
.
동적 가져 오기
다음으로 SRC/main.js에서 Ant Design 라이브러리를 가져 오십시오
<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span> <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>
이 파일에서는 현재 구매 한 품목의 양이있는 쇼핑 카트 아이콘을 표시하고 있습니다. 항목 자체는 데이터 속성으로 선언 된 항목 배열에서 가져옵니다. 항목의 구매 버튼을 클릭하면 additem 메소드가 호출되어 해당 항목을 쇼핑 목록 배열로 밉니다. 결과적으로, 이것은 카트의 총계를 증가시킬 것입니다
<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span> <span><span><span><div</span>></span>
</span> <span><span><span><message</span>></span><span><span></message</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span> <span>components: {
</span></span></span><span><span> <span>Message
</span></span></span><span><span> <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span> 버튼을 추가했으며, 이것이 흥미로워지기 시작하는 곳입니다.
checkout 버튼을 클릭 할 때만로드됩니다.
Vue Async 구성 요소는 Vue.js의 강력한 기능으로 개발자가 구성 요소를 비동기로로드 할 수 있습니다. 이는 구성 요소가 필요할 때만로드되므로 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 이는 모든 구성 요소를 한 번에로드하면 응용 프로그램을 늦출 수있는 대규모 응용 분야에 특히 유리합니다. 구성 요소를 비동기로로드하면 응용 프로그램에서 더 나은 사용자 경험을 제공하여 응용 프로그램이 빠르고 반응이 좋지 않도록 할 수 있습니다. vue 라우터와 함께 Vue Async 구성 요소를 사용할 수 있습니까? VUE Async 구성 요소를 사용할 때 오류를 처리하는 방법? resolve ({<span>// static import
</span><span>import <span>Message</span> from "./Message";
</span>
<span>// dynamic import
</span><span>import("./Message").then(<span>Message</span> => {
</span> <span>// Message module is available here...
</span><span>});
</span>
<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span> <span><span><span><div</span>></span>
</span> <span><span><span><message</span>></span><span><span></message</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span> <span>components: {
</span></span></span><span><span> <span><span>Message</span>: () => import("./Message")
</span></span></span><span><span> <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span> <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>
vue.component ( 'async-example', function (resolve, devrect) { settimeout (function () { // 컴포넌트 정의를 콜백을 해결합니다. resolve ({ 템플릿 : '
VUE Async 구성 요소와 일반 VUE 구성 요소의 주요 차이점은로드되는 방법입니다. 일반 VUE 구성 요소는 동기식으로로드되므로 응용 프로그램이 시작될 때 한 번에로드됩니다. 반면에 VUE 비동기 성분은 비동기 적으로로드되므로 필요할 때만로드됩니다. 이것은 특히 많은 구성 요소가있는 대규모 애플리케이션의 경우 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. vue async 구성 요소를 사용할 때 처리 할 수 있습니다. vue.component 메소드에 두 번째 함수를 제공하여 오류. 약속이 거부되면이 기능이 호출됩니다. 예는 다음과 같습니다.
vue.component ( 'async-example', function (resolve, devrect) { settimeout (function () { // 컴포넌트 정의를 콜백
이 예에서는 약속이 거부되면 오류가 콘솔에 로그인됩니다.
vue async 구성 요소를 vuex와 함께 사용할 수 있습니까?
예, vuex와 함께 Vue Async 구성 요소를 사용할 수 있습니다. Vuex는 vue.js의 주 관리 라이브러리이며 Vue Async 구성 요소와 잘 작동합니다. 일반 구성 요소와 마찬가지로 비동기 구성 요소에서 동작을 파견하고 돌연변이를 커밋 할 수 있습니다.
VUE Async 구성 요소를 테스트하려면 어떻게해야합니까? VUE Async 구성 요소 테스트 일반 VUE 구성 요소 테스트와 유사합니다. . Vue Test Utils 및 Jest와 같은 라이브러리를 사용하여 구성 요소에 대한 단위 테스트를 작성할 수 있습니다. 그러나 Async 구성 요소가 비동기로로드되므로 테스트에서 Async/Await을 사용하여 어설 션을 수행하기 전에 구성 요소를로드 할 때까지 기다려야 할 수도 있습니다.
Vue Cli와 함께 Vue Async 구성 요소를 사용할 수 있습니까?
예, Vue Cli와 함께 Vue Async 구성 요소를 사용할 수 있습니다. Vue Cli는 스캐 폴딩 Vue.js 프로젝트를위한 명령 줄 도구이며 Async 구성 요소를 지원합니다. vue.component 메소드를 사용하여 Vue CLI 프로젝트에서 Async 구성 요소를 정의 할 수 있습니다.
VUE Async 구성 요소의 성능을 최적화하려면 어떻게해야합니까?
성능을 최적화하는 몇 가지 방법이 있습니다. vue 비동기 구성 요소. 한 가지 방법은 코드 분할을 사용하는 것입니다. 이는 코드를 주문시로드 할 수있는 작은 청크로 코드를 분할 할 수 있습니다. 또 다른 방법은 게으른 하중을 사용하는 것입니다. 이로 인해 부품이 필요할 때만 부품을로드 할 수 있습니다. 브라우저가 유휴 상태 일 때 배경에 부품을로드하기 위해 프리 페치 및 프리로드를 사용할 수도 있습니다.
위 내용은 Async 구성 요소로 VUE 앱의 성능을 최적화하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!