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

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

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