Apakah perbezaan antara komponen tak segerak dan komponen dinamik dalam Vue

Perbezaan: 1. Komponen dinamik ialah elemen Html khas "" dalam Vue. Nilai atribut boleh menjadi "nama komponen berdaftar" atau "komponen "objek pilihan"; komponen tak segerak bukanlah objek fizikal, tetapi konsep, cara untuk memuatkan komponen secara tidak segerak. 2. Komponen dinamik digunakan untuk penukaran dinamik antara komponen yang berbeza digunakan untuk pengoptimuman prestasi, seperti mengurangkan masa memuatkan skrin pertama dan memuatkan saiz sumber. <component>

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Komponen Asynchronous

Dalam sesetengah aplikasi Vue berskala besar, sama ada untuk pengekstrakan kod atau pembahagian logik, aplikasi itu pasti akan dibahagikan kepada beberapa komponen bentuk blok kod kecil dalam kesedaran kita. import boleh diperkenalkan di mana perlu, seperti berikut:

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

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

Pengenalan dengan cara ini, MyComponent semasa proses pembinaan, Ia akan disegerakkan ke dalam bundle.js halaman

Pada masa ini, dalam beberapa senario, seperti:

1 Komponen ini sangat besar

2 tidak diperlukan dari awal halaman

Kemudian semasa proses pembinaan, kami meletakkan kod komponen ke dalam halaman js, yang jelas tidak sesuai

Vue menyediakan konsep 异步组件 : memuatkan

dari pelayan hanya apabila diperlukan Kita boleh mentakrifkannya seperti ini:

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

Contoh di atas digunakan setTimeout mensimulasikan pemerolehan tak segerak dalam keadaan sebenar, anda juga boleh meminta templat selepas penyusunan komponen melalui ajax, dan kemudian memanggil kaedah resolve jika pemuatan gagal, anda boleh memanggil kaedah reject

Dalam kebanyakan kes, komponen kami semua dibahagikan kepada; fail .vue secara berasingan, jadi kami boleh melakukan ini:

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

Sintaks require istimewa ini akan memberitahu pek web untuk memotong kod binaan anda secara automatik kepada berbilang Pakej, pakej ini akan dimuatkan melalui permintaan Ajax

Jadi jika halaman anda tidak menggunakan komponen ini, secara semula jadi ia tidak akan meminta pakej js komponen

Sudah tentu, anda juga boleh mendaftar komponen tak segerak secara tempatan

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

Komponen Dinamik

Apabila bercakap tentang komponen tak segerak, ramai orang akan memikirkan 动态组件 lain yang serupa dan sentiasa mengelirukan kedua-duanya.

Sebenarnya, 动态组件 dan 异步组件 adalah perkara yang berbeza sama sekali! ! !

Mari kita ringkaskan

动态组件: Ia adalah elemen Html khas dalam Vue: <component>, yang mempunyai atribut is khas, nilai atribut Ia boleh menjadi 已注册组件的名称 atau 一个组件的选项对象, yang digunakan untuk penukaran dinamik antara komponen yang berbeza.

异步组件: Ringkasnya, ia adalah satu konsep, cara untuk memuatkan komponen secara tidak segerak; ia biasanya digunakan untuk pengoptimuman prestasi, seperti mengurangkan masa pemuatan skrin pertama dan memuatkan saiz sumber.

(Mempelajari perkongsian video: Bermula dengan bahagian hadapan web, tutorial video vue)

Atas ialah kandungan terperinci Apakah perbezaan antara komponen tak segerak dan komponen dinamik dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!