Memahami Gaya API dalam Vue.js-tutorial js-php.cn

Memahami Gaya API dalam Vue.js

Mary-Kate Olsen

Lepaskan： 2025-01-13 20:34:44

asal

464 orang telah melayarinya

Understanding the Styles of APIs in Vue.js

Vue ialah rangka kerja JavaScript untuk membina antara muka pengguna. Ia dibina di atas HTML standard, CSS dan JavaScript serta menyediakan model pengaturcaraan berasaskan komponen yang deklaratif yang membantu anda membangunkan antara muka pengguna dengan cekap dalam sebarang kerumitan.
Komponen Vue boleh dikarang dalam dua gaya API: API Pilihan dan API Komposisi (Diperkenalkan di atas versi 2.6), Kedua-dua pendekatan mempunyai faedah dan kelemahan unik mereka, dan memilih yang sesuai untuk projek anda boleh menjadi keputusan yang sukar.

Mari kita mendalami kedua-dua gaya pemahaman

API Pilihan:
API Pilihan ialah cara tradisional untuk membina komponen Vue. Ia mentakrifkan gelagat dan keadaan komponen menggunakan set pilihan seperti data, kaedah dan sifat yang dikira.
data(): Fungsi ini mengembalikan objek yang mengandungi sifat data reaktif komponen. Sifat ini akan mengemas kini output yang dihasilkan komponen apabila nilainya berubah.
method(): Fungsi ini mengembalikan objek yang mengandungi kaedah (fungsi) yang boleh digunakan di dalam templat komponen atau kaedah lain. Kaedah ini boleh memanipulasi data atau melakukan tindakan.
sifat dikira: Fungsi ini mengembalikan nilai berdasarkan data komponen. Mereka dikira semula apabila mana-mana kebergantungan mereka (sifat data reaktif) berubah.
Salah satu faedah utama API Pilihan ialah ia mudah dan mudah difahami. Ia mengikuti corak perisytiharan yang jelas yang biasa kepada banyak pembangun, dan ia didokumentasikan dengan baik dalam dokumentasi Vue. Ini menjadikannya pilihan yang baik untuk pemula yang baru bermula dengan Vue.

Walau bagaimanapun, API Pilihan mempunyai beberapa had yang boleh menyukarkan penggunaan untuk projek yang lebih kompleks.
Satu lagi had API Pilihan ialah ia tidak fleksibel apabila berkongsi logik antara komponen.
Komponen ujian unit yang dibina dengan API Pilihan boleh menjadi lebih mencabar. Penyebaran logik merentas pilihan yang berbeza menjadikannya lebih sukar untuk mengasingkan fungsi tertentu untuk ujian.

Jom lihat Contoh penggayaan API Pilihan :

<template>
    <div>
        <h4>{{ name }}'s To Do List</h4>
        <div>
            <input v-model="newItemText" v-on:keyup.enter="addNewTodo" />
            <button v-on:click="addNewTodo">Add</button>
            <button v-on:click="removeTodo">Remove</button>
        </div>
        <ul>
            <li v-for="task in tasks" v-bind:key="task">{{ task }}</li>
        </ul>
    </div>
</template>
<script>
    export default { 
    data() { 
           return 
               {  name: "John", 
                  tasks: ["Buy groceries", "Clean the house"], 
                  newItemText: "", 
                };
            }, 
   methods: { 
          addNewTodo() 
            { 
               if (this.newItemText !== "") 
                {  this.tasks.push(this.newItemText); 
                   this.newItemText = ""; 
                } 
            }, 
         removeTodo(index) { this.tasks.splice(index, 1); }, }, };
</script>

Salin selepas log masuk

API Komposisi :

API Komposisi ialah satu set alat yang diperkenalkan dalam Vue 3 (dan tersedia untuk Vue 2 melalui pemalam) yang menyediakan cara alternatif untuk menulis logik komponen berbanding API Pilihan tradisional. Ia memfokuskan pada mengarang fungsi boleh guna semula untuk mengurus keadaan dan gelagat komponen.
Dengan API Komposisi, kami mentakrifkan logik komponen menggunakan fungsi API yang diimport. Ia juga membenarkan pembangun menggunakan kuasa penuh JavaScript untuk menentukan gelagat komponen.
API Komposisi biasanya digunakan dengan . Atribut persediaan ialah pembayang yang menjadikan Vue melakukan perubahan masa kompilasi yang membolehkan kami menggunakan API Komposisi dengan kurang plat dandang.
Asas API Komposisi ialah sistem kereaktifan terbina dalam Vue. Fungsi seperti ref dan reaktif mencipta data reaktif yang mengemas kini komponen secara automatik apabila ia berubah. Ini memudahkan pengurusan keadaan berbanding dengan menyediakan pengambil dan penetap secara manual dalam API Pilihan.
API Komposisi menyokong suntikan kebergantungan melalui fungsi seperti menyediakan dan menyuntik.
API Komposisi amat berfaedah untuk:

Membina komponen kompleks dan boleh guna semula
Projek yang mengutamakan penyusunan kod dan kebolehselenggaraan
Aplikasi yang memanfaatkan TypeScript untuk keselamatan jenis
API Komposisi mungkin kelihatan seperti pilihan terbaik untuk digunakan. Walau bagaimanapun, API Komposisi bukan tanpa kelemahannya. Satu isu ialah ia boleh menjadi lebih sukar untuk dipelajari bagi pembangun yang tidak biasa dengan pengaturcaraan yang berfungsi dan reaktif.
Isu lain ialah API Komposisi tidak serasi ke belakang dengan Vue 2.6 dan ke bawah secara lalai. Ini bermakna anda perlu sama ada menaik taraf kepada Vue 3.0 atau mengimport API Komposisi melalui pemalam.

Mari lihat Contoh penggayaan API Komposisi :

Atas ialah kandungan terperinci Memahami Gaya API dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!