Apakah perbezaan antara komponenisasi dan modularisasi dalam vue

Perbezaan antara komponenisasi dan modularisasi: Modularisasi dibahagikan dari perspektif logik kod; ia memudahkan pembangunan berlapis kod dan memastikan bahawa fungsi setiap modul berfungsi adalah konsisten. Pengkomponenan adalah perancangan dari sudut antara muka UI pemkomponenan bahagian hadapan memudahkan penggunaan semula komponen UI.

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

Asal usul modulariti

Pada hari-hari awal pembangunan web, js digunakan sebagai bahasa skrip untuk melakukan beberapa pengesahan bentuk mudah atau pelaksanaan animasi, dengan agak jumlah kecil kod , tulis sahaja dalam tag skrip

Dengan kemunculan permintaan tak segerak Ajax, pemisahan bahagian hadapan dan bahagian belakang telah terbentuk secara beransur-ansur. dan jumlah kod juga semakin meningkat. Untuk mengatasi peningkatan dramatik dalam jumlah kod, kami biasanya menyusun kod dalam berbilang fail js untuk penyelenggaraan

Tetapi akan ada beberapa masalah: seperti masalah pembolehubah global dengan nama yang sama

Gunakan penutupan fungsi Pakej boleh menyelesaikan masalah konflik pembolehubah, tetapi pembolehubah yang ditakrifkan dalam fail lain tidak boleh digunakan

Modularisasi mempunyai dua teras: eksport dan import

Ketahui tentang pembangunan modular es6

Kata kunci eksport (eksport) import (import)

Sebagai contoh, merangkum modul yang menghantar ajax

Dalam sesetengah kes, modul mengandungi fungsi tertentu, dan kami tidak mahu menamakan fungsi ini dengan sendirinya

Anda boleh menggunakan lalai eksport

.

export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

//导入 import

Mengapa menggunakan modulariti? Kelebihan menggunakan modulariti

Sudah tentu semua fungsi halaman boleh direalisasikan tanpa menggunakan pembangunan modular, tetapi ia akan meningkatkan tekanan pada permintaan pelayan dan mengurangkan pengalaman pengguna Apabila halaman keperluan Apabila terdapat terlalu banyak data, satu permintaan mengandungi semua data yang diminta Bagaimana jika pengguna tidak memerlukannya? Adakah permintaan sedemikian masih berkesan? Sudah tentu ia tidak memberi kesan, jadi masalah seperti ini boleh diselesaikan dengan menggunakan idea pembangunan modular

Bercakap secara ringkas tentang faedah menggunakan pembangunan modular

1 penyelenggaraan yang mudah

2. Semua data tidak akan diminta kembali sekaligus, dan pengalaman pengguna adalah baik

3 , atau mereka boleh bergantung pada Modul lain

Perbandingan antara komponenisasi dan modularisasi

Ramai orang memahami komponenisasi dan modularisasi sebagai satu, dan sudah tentu mereka serupa di banyak tempat, mari kita lihat persamaan di bawah!

1. Pengkomponenan ialah unit organisasi kod yang bebas dan boleh digunakan semula. Sistem komponen ialah salah satu ciri teras Vue, yang membolehkan pembangun membina aplikasi besar menggunakan komponen yang kecil, bebas dan sering boleh digunakan semula [Cadangan berkaitan: Tutorial pengenalan Vuejs, bahagian hadapan web<; 🎜> 】

2. Pembangunan berasaskan komponen boleh meningkatkan kecekapan pembangunan aplikasi, kebolehgunaan semula, dsb.

3 , dan komponen umum ;

4 Komponen Vue adalah berdasarkan konfigurasi komponen dan bukannya komponen.

5. Teknologi komponen biasa dalam Vue termasuk prop atribut, acara tersuai, slot, dll., yang digunakan terutamanya untuk komunikasi komponen, pengembangan, dll. 6. Pembahagian komponen yang munasabah membantu meningkatkan prestasi aplikasi ;

7 Komponen harus sangat kohesif dan gandingan rendah

8.

Perbezaan antara komponenisasi dan modularisasi:

Modularisasi: Ia dibahagikan daripada perspektif logik kod; memastikan setiap modul berfungsi mempunyai satu fungsi

Pengkomponenan: Ia dibahagikan daripada perspektif antara muka UI, dan komponenisasi bahagian hadapan memudahkan penggunaan semula komponen UI

Tiga cara untuk menentukan komponen globalCara pertama

Cara kedua

 <div id="app">
        <!-- 如果要使用组件，直接把组件的名称，以HTML标签形式，引入到页面中即可 -->
    <mycom1></mycom1>
    </div>

<script>
        var com1 = Vue.extend({
        template:&#39;<h3 id="使用Vue-extend-nbsp-来创建全局的Vue组件">使用Vue.extend 来创建全局的Vue组件</h3>&#39;
        })
        //1,使用Vue.component(&#39;组件名&#39;，创建出来的组件模板对象)
        Vue.component(&#39;mycom1&#39;,com1)
 </script>

Jenis ketiga

<script>
Vue.component(&#39;mycom2&#39;,{template:&#39;<div><h3 id="使用Vue-component-nbsp-创建出来的组件">使用Vue.component 创建出来的组件</h3>s<span>template</span></div>&#39;
        })
</script>

Nota: Tidak kira cara mana komponen dicipta, kandungan templat yang ditunjukkan oleh atribut templat komponen mesti ada dan hanya boleh unik .

<templat id="temp">
 <div>
   <h1 id="通过templat元素-在外部定义的组件结构-这个方式-有代码的智能提示和高亮">通过templat元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮</h1>
   <h4 id="好用-不错">好用，不错</h4>
  </div>
</templat>

<script>
 Vue.component(&#39;mycom2&#39;,{
            template:&#39;temp&#39;
        })
</script>

Kaedah ketiga adalah terbaik untuk digunakan dalam pembangunan projek kerja

[Cadangan berkaitan:

tutorial video vuejs

]

Atas ialah kandungan terperinci Apakah perbezaan antara komponenisasi dan modularisasi dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!