Vue의 비동기 구성 요소와 동적 구성 요소의 차이점은 무엇입니까

차이점: 1. 동적 구성 요소는 Vue의 특수 HTML 요소 "<comComponent>"입니다. 속성 값은 "등록된 구성 요소의 이름" 또는 "구성 요소의 옵션 개체"일 수 있습니다. " ; 비동기 구성 요소는 물리적 개체가 아니라 구성 요소를 비동기적으로 로드하는 개념입니다. 2. 동적 구성 요소는 서로 다른 구성 요소 간의 동적 전환에 사용되며, 첫 번째 화면 로딩 시간 단축 및 로딩 리소스 크기와 같은 성능 최적화를 위해 비동기 구성 요소가 사용됩니다. <component>

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

비동기 구성 요소

일부 대규모 Vue 응용 프로그램에서는 코드 추출을 위한 것이든 논리적 분할을 위한 것이든 응용 프로그램은 필연적으로 작은 코드 블록으로 나누어져 우리 의식의 구성 요소를 형성합니다. 가져오기 code>는 필요한 곳에 도입할 수 있습니다. 예: <code>import 引入，例如下面：

    import MyComponent from '../components/my-component.vue'

    new Vue({
        // ...
        components: {MyComponent}
    })

这种方式引入，MyComponent 在构建的过程中，会被同步打入页面的bundle.js中

这个时候，在某些场景中，比如：

1、这个组件的体积很大

2、它不是页面一开始就需要的

那么我们在构建的过程中，就将组件代码打入页面js中，显然是不合适的

Vue提供了一种异步组件的概念：只在需要的时候才从服务器加载

我们可以这么定义：

    Vue.component('async-example', function (resolve, reject) {
        setTimeout(function () {
            // 向 `resolve` 回调传递组件定义
            resolve({
                template: '<div>I am async!</div>'
            })
        }, 1000)
    })

上面的例子，采用 setTimeout 模拟异步获取组件，真实情况，甚至可以通过ajax请求组件编译之后的template，然后调用 resolve 方法；如果加载失败，可以调用 reject 方法

大部分情况下，我们的组件都是单独分割成一个 .vue 文件，那么我们可以这么做：

    Vue.component('async-webpack-example', function (resolve) {
        require(['./my-async-component'], resolve)
    })

这个特殊的 require 语法将会告诉 webpack，自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载

那么如果你的页面没有用到这个组件，自然就不会请求组件的js包

当然，也可以局部注册异步组件

    new Vue({
    // ...
        components: {
            'my-component': () => import('./my-async-component')
        }
    })

动态组件

说到异步组件，很多人就会想到另一个类似的 动态组件，并且总是会弄混两者的关系。

其实 动态组件 和 异步组件 完全不是一码事！！！

直接上总结

动态组件：是Vue中一个特殊的Html元素：<component>，它拥有一个特殊的 is 属性，属性值可以是 已注册组件的名称 或 一个组件的选项对象，它是用于不同组件之间进行动态切换的。

异步组件rrreee

이런 식으로 도입되면 MyComponent는 .js

이때 페이지 번들에 동기화됩니다. 다음과 같은 일부 시나리오: 1. 이 구성 요소의 크기가 매우 큽니다.

🎜🎜🎜2 페이지 시작 부분부터 필요하지 않습니다.🎜🎜🎜 그러면 우리는 구성 과정에 있으며 분명히 부적절합니다. 페이지 js에 구성 요소 코드를 입력하려면🎜🎜Vue는 비동기 구성 요소 개념을 제공합니다. 필요할 때만 서버에서 로드됩니다🎜🎜이를 수행할 수 있습니다. 정의: 🎜rrreee🎜위의 예에서는 setTimeout을 사용하여 구성 요소의 비동기 획득을 시뮬레이션할 수도 있습니다. 실제 상황에서는 ajax를 통해 구성 요소를 컴파일한 후 템플릿을 요청한 다음 로드에 실패하면 resolve 메서드를 호출할 수도 있습니다. reject 메서드를 호출할 수 있습니다🎜🎜대부분의 경우 구성 요소는 .vue 파일로 분리되어 있으며 다음과 같이 할 수 있습니다.🎜rrreee🎜 이 특별한 require 구문은 webpack이 자동으로 빌드 코드를 여러 패키지로 자르도록 지시합니다. 이러한 패키지는 Ajax 요청을 통해 로드됩니다. 따라서 페이지에서 이 구성 요소를 사용하지 않으면 자연스럽게 구성 요소의 js 패키지를 요청하지 않습니다. 🎜🎜물론 로컬에서 비동기 구성 요소를 등록할 수도 있습니다🎜rrreee🎜🎜동적 구성 요소🎜🎜🎜비동기 구성 요소라고 하면 많은 사람들이 또 다른 유사한 동적 구성 요소를 생각하고 두 요소 사이의 관계를 항상 혼동합니다. 둘. 🎜🎜사실 동적 구성 요소와 비동기 구성 요소는 완전히 다릅니다! ! ! 🎜🎜🎜요약으로 바로 이동🎜🎜🎜동적 구성 요소: Vue의 특수 Html 요소인 <comComponent>는 특수 가 있습니다. 속성에서 속성 값은 등록된 구성 요소의 이름 또는 구성 요소의 옵션 개체일 수 있으며, 이는 서로 다른 구성 요소 간의 동적 전환에 사용됩니다. 🎜🎜비동기 구성 요소: 간단히 말해서 구성 요소를 비동기적으로 로드하는 개념, 방법으로 일반적으로 첫 화면 로딩 시간 단축, 리소스 크기 로딩 등 성능 최적화를 위해 사용됩니다. 🎜🎜 (동영상 공유 학습: 🎜웹 프론트엔드 시작하기🎜, 🎜vue 동영상 튜토리얼🎜)🎜

위 내용은 Vue의 비동기 구성 요소와 동적 구성 요소의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!