Penjelasan terperinci tentang fungsi yang dikira dalam dokumentasi Vue

Vue.js ialah rangka kerja bahagian hadapan JavaScript yang popular. Ia boleh dengan mudah menyedari hubungan antara HTML dan JavaScript, dengan itu meningkatkan prestasi aplikasi web. Terdapat fungsi yang dipanggil computed dalam rangka kerja Vue.js Tujuan utamanya ialah untuk melaksanakan pengiraan responsif dan operasi formula pada data halaman. Seterusnya, mari kita terangkan fungsi ini secara terperinci.

Apakah fungsi yang dikira? Fungsi

computed ialah fungsi yang sangat penting dalam Vue.js Fungsinya adalah untuk mengira atribut yang dikira boleh melakukan pemprosesan data pada atribut lain dan mengembalikan data baharu. computedFungsi bergantung pada data yang ditakrifkan dalam objek data Apabila data ini berubah, kod di dalam fungsi computed akan dikemas kini secara automatik.

Kita boleh menganggap fungsi computed sebagai data reaktif dalam Vue, kerana ia juga mempunyai ciri responsif. Sifat yang dikira dikira semula secara automatik apabila data bergantungnya berubah.

Sintaks

computedSintaks fungsi ini sangat mudah:

computed: {
    计算属性名字: function() {
        //return 你要计算的值
    }
}

Di sini kita perlu menggunakan kata kunci computed, diikuti dengan objek, yang mengandungi Satu atau lebih sifat yang dikira. Nama atribut yang dikira ialah nama yang ditakrifkan oleh kami sendiri (boleh difahami sebagai nama pembolehubah), dan nilai pulangannya ialah hasil pengiraan kami. Apa yang perlu diperhatikan di sini ialah jangan menukar data data lain secara manual dalam kaedah pengiraan atribut, kerana ini akan menyebabkan gelung tak terhingga.

Contoh

Untuk membantu anda memahami fungsi computed dengan lebih baik, mari lihat contoh di bawah.

<div id="app">
    <input v-model="message" />
    <p>{{ reversedMessage }}</p>
</div>

Kami menentukan kotak input dan teg perenggan dalam templat Kandungan dalam kotak input terikat pada data mesej dalam data melalui arahan model-v. Pada masa yang sama, kami mentakrifkan atribut terkira reversedMessage, yang mengembalikan susunan terbalik data mesej. Berikut ialah kod JavaScript lengkap:

var app = new Vue({
    el: '#app',
    data: {
        message: ''
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('')
        }
    }
})

Kaedah computed dalam fungsi reversedMessage dalam contoh ini digunakan untuk mengira hasil susunan terbalik mesej. Apabila kami memasukkan maklumat dalam kotak input, kaedah reversedMessage secara automatik akan dicetuskan untuk mengemas kini. Ini kerana kaedah reversedMessage bergantung pada data message dalam data selagi data berubah, kaedah reversedMessage akan memuat semula halaman secara automatik.

Kelebihan fungsi pengiraan

computed fungsi terutamanya mempunyai kelebihan berikut:

1 Menyimpan kod: Apabila menggunakan fungsi computed, kita tidak perlu kepada Anda boleh melengkapkan pengemaskinian dan pengiraan data dengan menulis terlalu banyak kod.

2. Tingkatkan prestasi: computedHasil pengiraan fungsi dicache dan hanya akan dikira semula apabila data bergantung pada perubahan.

3. Kod ringkas: Memandangkan fungsi computed mengesan perubahan data secara automatik, kami tidak perlu menentukan data bergantung atribut yang dikira terlebih dahulu. Ini sangat memudahkan kod kami.

Ringkasan

computedFungsi ini ialah kaedah nilai data yang sangat berguna dalam Vue.js. Ia membolehkan kami mengira dan mengemas kini data dengan lebih mudah, dan mempunyai kelebihan hebat dari segi kesederhanaan dan prestasi kod. Jika anda seorang pemula kepada Vue.js, adalah disyorkan untuk terlebih dahulu menguasai penggunaan fungsi yang dikira semasa mempelajari rangka kerja Vue.js.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi yang dikira dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!