Mari kita bercakap secara mendalam tentang dua gaya penulisan komponen Vue yang berbeza.

Artikel ini akan membincangkan dua gaya penulisan komponen Vue yang berbeza, dan memperkenalkan API pilihan dan gabungan API secara terperinci, saya harap ia akan membantu semua orang.

Dengan penstabilan beransur-ansur vue3 dan penambahbaikan ekologi sekeliling, vue3 kini telah menjadi penggunaan lalai

Jadi, untuk pembangunan bahagian hadapan Pembaca, anda perlu mengetahui kedua-dua Vue2 dan Vue3 Terdapat banyak perkara baharu dalam vue3, seperti: Fragmen, Teleport, Suspense dan beberapa ciri dalam vue2 juga dialih keluar, seperti: mengalih keluar sokongan KeyCode sebagai pengubah v-on. , dsb.

Terdapat juga beberapa perbezaan dalam gaya pengaturcaraan

API Pilihan

API Pilihan juga boleh menjadi API item konfigurasi, yang merupakan objek pilihan contoh komponen Untuk menerangkan logik komponen, seperti: data komponen, methods, cangkuk kitaran hayat mounted dan watch pendengar. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web] Atribut yang ditakrifkan oleh komponen

akan didedahkan pada this di dalam fungsi, yang akan menunjuk kepada Contoh semasa komponen, dalam kitaran hayat dan kaedah, boleh diakses dan dibaca melalui this

Formula pilihan berikutAPIKod sampel adalah seperti berikut

<template>
  <div class="base-vue3-code-style">
      <el-button type="danger"  @click="handleIncrease"
      >选项式API累加</el-button>
      <p>{{count}}</p>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            count:0
        }
    },
    methods: {
      // 定义方法,修改data下面的数据  
      handleIncrease() {
        this.count++
      }
    },
  };
</script>
<style scoped>
  .base-vue3-code-style {
    text-align: center;
  }
</style>

Untuk formula pilihanAPI ialah spesifikasi penulisan vue2.0 Data responsif yang berkaitan dengan paparan halaman dipasang di bawah data, dan kaedah pengikatan diletakkan dalam methods Ia adalah konvensyen

Parameter konfigurasi pilihan boleh dikonfigurasikan

API Komposisi (API komposisi)

Komposisi API (Composition API) ialah siri API koleksi

terdiri daripada API dan vue tertentu boleh diimport daripada API (seperti ref (jenis data biasa), reactive (hanya terpakai untuk objek)) , Fungsi menerangkan logik komponen dan mencapai fungsi yang kita mahu

Biasanya, gabungan digunakan dengan <script setup></script>

Ini setup ialah logo, sama seperti type="text/javascript" Begitu juga, memberitahu vue bahawa beberapa pemprosesan perlu dilakukan pada masa penyusunan

membolehkan kami menggunakan gabungan API secara ringkas Contohnya: import dan pembolehubah atau fungsi peringkat atas dalam <script setup></script> boleh terus dalam templat Gunakan

bukannya mengisytiharkan pilihan untuk menulis vue komponen Gabungan API hanyalah istilah teknikal umum kerana ia menggabungkan beberapa API menggunakan

[1]. API Responsif: Contohnya: dan ref(), anda boleh terus mencipta jenis data asas reaktif dan jenis data objek reaktif reactive()

[2]. : Sebagai contoh,

, , anda boleh menambah logik onMounted()[3] dalam peringkat kitaran hayat komponen onUnmounted()Suntikan Kebergantungan

: gunakan

dan <🎜. >, anda boleh menggunakan sistem suntikan pergantungan apabila menggunakan provide() responsif Kod khusus adalah seperti berikut inject()APIVue[1]. Ruj fungsi API diperkenalkan dalam 🎜>

[2]. Dalam kod logik komponen, anda perlu menggunakan

untuk mendapatkan nilai dan mengubah suai

<template>
   <div class="base-vue3-code-style">
     <el-button type="primary"  @click="handleIncrease"
      >组合式API累加</el-button>
      <p>{{count}}</p>
     </div> 
</template>
<script setup>
  // 引入ref API
  import  {ref} from "vue";
  // 响应式数据状态,初始化数据,ref接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性
  const count = ref(0);  
  // 用来修改状态,触发更新元素,注意的是需要在逻辑中,需要使用`.value`进行访问
  function handleIncrease() {
    count.value++;
  }
</script>

[3]. Tidak perlu menulisnya dalam templat vue, data pembolehubah responsif yang ditakrifkan dalam fungsi boleh digunakan terus dalam templat

Ia boleh dilihat daripada perbandingan dua gaya pengekodan pilihan xxx.value dan digabungkan

bahawa jika anda menggunakan Pilihan

, maka data responsif yang terikat dalam halaman perlu dipasang di bawah pilihan konfigurasi xxx.value dan kaedah mengikat

perlu diletakkan di bawah pilihan konfigurasi API Kaedah penulisan adalah Tetap, dalam pilihan API, jika anda ingin mengakses sifat dan kaedah dalam logik, anda lebih bergantung pada API untuk mengakses data dan kaedah di bawah contoh komponen. . Dalam gabungan API, apa yang diperlukan secara khusus? Hanya memperkenalkan API yang menyelesaikan masalah daripada data, dan benar-benar memperkenalkannya atas permintaan

Jika anda mahu data asas responsif, anda perlu gunakan fungsi ref untuk membungkusnya. Pada masa ini, ia mempunyai keupayaan untuk menjadi responsif methodsAPI Walau bagaimanapun, dalam kod komponen, tiada this akan menjadi vue. Anda boleh mengakses gabungan > Nilai terdedah, tetapi bukan sebaliknya

Gambar berikut ialah perbandingan yang baik bagi perbezaan antara pilihan

dan komponen this Hanya anda biasa atau tidak, Vue3 ialah peningkatan dan pengembangan vue2

Pada sistem asas, ia menyediakan dua set antara muka yang berbeza untuk pembangun bebas memilih dan Menggunakan

pilihan API berpusat pada contoh komponen, dengan fungsi pembina, iaitu this sebagai teras Bagi pembangun yang biasa dengan bahasa berorientasikan objek, penggunaan kelas menjadi lebih harmoni

Ia mengabstrakkan butiran yang berkaitan dengan komponen, seperti data dan kaedah, dan memisahkan data dan kaedah melalui beberapa peraturan yang dipersetujui, memastikannya bebas dan mengatur kod kami dengan cara pilihan

Ia sangat mesra untuk pemula dan pemula

Inti API gabungan adalah untuk menentukan pembolehubah keadaan responsif secara langsung dalam skop fungsi Ia tidak perlu dipasang seperti API pilihan data

ia mendapat status terus daripada fungsi, dengan terus memperkenalkan fungsi API responsif yang sepadan daripada

untuk membalut jenis data asas dan jenis data bukan asasvue

Keresponsifan data

Kaedah pengaturcaraan ini lebih percuma, dan kecekapan pelaksanaan kod akan lebih tinggi fleksibilitinya menjadikan corak penyusunan dan penggunaan semula logik sangat berkuasa

Jika

adalah kuda liar dengan sumpahan, maka vue2 adalah kuda liar yang terbebas dari sumpahan dan menjadi lebih bebasvue3

Cadangan kajian

[ 1].

juga boleh bercampur-campur, tetapi anda hanya boleh memilih kaedah pengekodan yang anda suka dan biasa dengannya. Ia tidak lebih daripada satu lagi gaya pengekodan Vue2Vue3[2]. untuk menggunakan alat binaan, atau merancang untuk menggunakan

dalam senario kerumitan rendah, seperti senario aplikasi peningkatan progresif, maka secara rasmi disyorkan anda menggunakan

pilihan, iaitu vue gaya pengaturcaraan API vue2[3]. Apabila anda bercadang untuk menggunakan

untuk membina aplikasi satu halaman yang lengkap, maka cadangan rasmi adalah untuk menggunakan gabungan

pendekatan komponen fail tunggal untuk membina projek anda sendiri vueAPI+

Cara menggunakan vue3 dengan versi Vue2.7 yang lebih rendah

Untuk versi di atas

dan

, anda boleh menggunakan gabungan vue3, untuk versi yang lebih rendah vue2.7 Untuk yang berikut, anda boleh menggunakan pemalam @vue/composition-api yang diselenggara secara rasmiAPIvue2.7Dalam

, gabungan

pada asasnya akan digunakan dalam komponen fail tunggal dengan sintaks vue3API<script setup></script>

API gabungan bukan pengaturcaraan berfungsi

Gaya API yang digubah adalah berdasarkan gabungan fungsi, tetapi ia bukan pengaturcaraan berfungsi

Pengaturcaraan Fungsian

: Anda boleh menghantar fungsi sebagai data dan parameter Fungsi adalah warga pertama, fungsi UI tulen Jika anda telah menggunakan React, anda tahu ini

Fungsi tulen

: Dunia tanpa negara dengan fungsi input dan output lebih tinggi dalam React, serta memetakan dan mengurangkan dalam tatasusunan semuanya adalah pengaturcaraan berfungsi Digabungkan

sudah

Data boleh diubah dan berdasarkan halus- sistem responsif berbutir, manakala pengaturcaraan berfungsi biasanya menekankan kebolehubahan data, iaitu aliran data sehalaAPIVue

Mengapa terdapat gabungan API

1 guna semula

Gabungan

boleh mencapai penggunaan semula logik yang lebih ringkas dan cekap melalui fungsi gabungan Dalam pilihan Mekanisme penggunaan semula logik utama kami dalam

ialah API, dan dengan gabungan API. , semua kecacatan dalam mixins boleh diselesaikan APImixins

2. Organisasi kod yang lebih fleksibel

Dalam

pengaturcaraan API pilihan, anda mesti mengikut spesifikasi penggunaan

untuk mengatur kod anda sendiri diletakkan di bawah vue2.0, manakala kaedah diletakkan di bawah kaedah Di dalamvuedataWalau bagaimanapun, apabila logik satu komponen fail dalam API pilihan adalah rumit. pada tahap tertentu, beberapa masalah akan timbul. Masalah ini terutamanya berkaitan dengan pelbagai kebimbangan logik

Dalam fail Dalam komponen, tatal ke atas dan ke bawah untuk melihat coretan kod

Kod yang mengendalikan perkara yang sama. kebimbangan logik terpaksa dibahagikan kepada pilihan yang berbeza, terletak di bahagian fail yang berlainan

Dalam satu jika terdapat ratusan Dalam komponen besar baris, untuk memahami kebimbangan logik dalam kod, anda perlu menatal ke atas dan turun fail semasa, dan jika anda ingin mengekstrak dan membina semula kebimbangan logik

menjadi boleh diguna semula Dalam fungsi alat, anda perlu mencari serpihan yang betul yang anda perlukan dari pelbagai bahagian fail yang berbeza, dan jika anda menggunakan API gabungan untuk membina semula komponen ini

organisasi logik kod akan menjadi sangat jelas

Kini kod yang berkaitan dengan kebimbangan logik yang sama dikumpulkan bersama dan kita tidak perlu lagi tatal ke depan dan ke belakang antara blok pilihan yang berbeza untuk kebimbangan logik

Selain itu, anda juga boleh mengumpulkan ini Memindahkan set kod ke fail luaran menghapuskan keperluan untuk menyusun semula kod untuk pengabstrakan, mengurangkan kos pemfaktoran semula

Ini sangat penting dalam beberapa projek besar dan kondusif untuk penyelenggaraan dan lelaran projek

Inferens jenis yang lebih baik

Digabungkan APITerutamanya menggunakan pembolehubah dan fungsi asas, yang mesra taip dan anda boleh menikmati kod yang ditulis semula dengan API yang terdiri Untuk jenis lengkap terbitan, tidak perlu menulis terlalu banyak jenis anotasi

Kebanyakan masa, gabungan Ts kod yang ditulis dengan API hampir sama dengan kod yang ditulis dengan js

Saiz pakej pengeluaran yang lebih kecil

Menggunakan gabungan API adalah lebih cekap daripada API pilihan, kerana gabungan API tidak secara automatik memperkenalkan kitaran hayat dan merupakan fungsi tulen, yang lebih cekap untuk kod Mampatan juga lebih mesra

Inilah sebabnya templat komponen yang ditulis dalam borang <script setup></script> disusun ke dalam fungsi sebaris dan berada dalam skop yang sama seperti kod dalam <script setup></script>

Tidak seperti gaya pilihan API perlu bergantung pada this objek konteks untuk mengakses sifat Templat yang disusun boleh mengakses terus pembolehubah yang ditakrifkan dalam <script setup></script> tanpa menggunakan API pilihan

dalam contoh objek menggunakan gabungan API , lebih mesra kepada pemampatan kod, kerana nama pembolehubah tempatan boleh dimampatkan, tetapi nama atribut objek tidak boleh

Memikirkan API berasaskan komponen

Gunakan kombinasi tidak seperti API gaya pilihan, logik yang ditentukan akan dipasang di bawah objek konfigurasi pilihan yang ditentukan oleh konvensyen. >

Pemaju mempunyai kurang untuk difikirkan, anda hanya perlu mengikuti resipi, langkah demi langkah, untuk

Bagi gabungan API, ia lebih berat sebelah terhadap js asli, tidak tertakluk kepada peraturan dan sekatan rangka kerja, dan lebih percuma dan mudah , tulis kod komponen seperti javascript biasa

boleh menulis tersusun

, dan mempunyai keupayaan untuk menulis kod API gabunganjavascript

API pilihan. gaya kod, yang benar pada tahap tertentu Ia boleh mengurangkan masa berfikir anda Jika anda ingin melaksanakan fungsi tertentu, maka anda perlu menyusun kod anda mengikut peraturan rangka kerja. Tiada pilihan

Ini juga akan menyebabkan masalah, jika anda melepaskan diri daripada rangka kerja, maka Kelemahan tidak dapat berfungsi

Dalam beberapa projek berskala yang agak besar, adalah sangat susah untuk memfaktorkan semula gaya kod API pilihan, dan lebih sukar untuk memfaktorkan semula dan meningkatkan kualiti kod Dalam kes ini Dari segi aspek, API gabungan memberikan kebolehselenggaraan jangka panjang yang lebih baik

API gabungan merangkumi semua senario

Dalam pengenalan rasmi, gabungan API pada asasnya boleh merangkumi Semua keperluan logik keadaan, iaitu, fungsi yang dilaksanakan menggunakan API pilihan vue2

masih boleh dicapai menggunakan

vue3

Dua kaedah pengaturcaraan API boleh dicampur

Pilihan

dan digabungkan API boleh dicampurkan jika anda ingin menggunakan gabungan API dalam pilihan API, berdasarkan API atau Vue3 Versi kemudiannya vue2.7

boleh menggunakan gabungan API

setup() melalui pilihan

Dalam dokumentasi rasmi, disebutkan bahawa ia telah dibangunkan untuk a lama berdasarkan pilihan

, tetapi ia perlu berdasarkan Untuk kod baharu gabungan API atau projek yang menyepadukan perpustakaan pihak ketiga, gunakan kaedah API setup()

Dalam erti kata lain, projek dengan

masih menggunakan kaedah API pilihan, Vue3 Projek memilih API gabungan, yang tidak lebih daripada gaya penulisan tambahan vue2

API pilihan tidak akan ditinggalkan dan merupakan bahagian penting vue . API pilihan adalah berdasarkan gabungan API Untuk projek bersaiz kecil dan sederhana, menggunakan API pilihan adalah pilihan yang baik

manakala gabungan API lebih sesuai untuk projek besar dan kompleks boleh dicapai. Ia bergantung pada mana satu yang lebih sesuai

Ringkasan

Pilihan

dan digabungkan API adalah dua gaya pengaturcaraan berbeza yang disediakan oleh <.>, dalam API Versi sebelumnya menggunakan pilihan Vue Data responsif perlu dipasang di bawah data, dan kaedah perlu dipasang di bawah vue2.7 Dalam gabungan API, anda hanya perlu menambah API dalam teg skrip. Selepas pengecaman, ini bermakna terdapat gabungan methods persekitaran penggunaan Untuk menggunakan setupAPI secara khusus, anda perlu memperkenalkan fungsi

yang sepadan daripada

dan fungsi yang ditakrifkan dalam vue boleh digunakan secara terus Digunakan dalam templat, ia lebih kepada perubahan gaya, membolehkan bahagian hadapan menyusun kod logik dengan lebih baik APIscript (Perkongsian video pembelajaran:

vuejs. tutorial pengenalan

, Video pengaturcaraan asas )

Atas ialah kandungan terperinci Mari kita bercakap secara mendalam tentang dua gaya penulisan komponen Vue yang berbeza.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!