Rumah  >  Artikel  >  hujung hadapan web  >  Fungsi yang dikira dalam dokumen Vue melaksanakan kesedaran data pergantungan

Fungsi yang dikira dalam dokumen Vue melaksanakan kesedaran data pergantungan

WBOY
WBOYasal
2023-06-20 15:48:101359semak imbas

Vue.js ialah rangka kerja JavaScript popular yang menyediakan banyak ciri berguna, yang mana fungsi pengiraan merupakan contoh yang baik. Fungsi yang dikira ialah fungsi yang sangat berguna dalam contoh Vue, yang boleh mengemas kini data secara automatik berdasarkan kebergantungan. Artikel ini akan menerangkan cara fungsi yang dikira dalam dokumen Vue melaksanakan kesedaran data pergantungan.

1. Konsep asas fungsi pengiraan

Dalam Vue, fungsi pengiraan ialah kaedah pengiraan yang boleh mengira data baharu berdasarkan data sedia ada. Dalam erti kata lain, fungsi yang dikira biasanya digunakan untuk mengira nilai atribut. Tetapi sifat yang dikira di sini tidak dikira menggunakan fungsi, tetapi menggunakan kaedah get dan kaedah set. Oleh itu, fungsi yang dikira bukan sahaja boleh mendapatkan nilai harta yang dikira, tetapi juga menetapkannya.

Cara fungsi yang dikira berfungsi ialah jika nilai kebergantungan bagi sifat yang dikira berubah, ia akan mengira semula dan mengembalikan nilai sifat yang dikira yang baharu. Sebagai contoh, sifat yang dikira ditentukan oleh hasil tambah dua sifat data A dan B. Apabila nilai A atau B berubah, sifat yang dikira akan mengira semula dan mengembalikan nilai jumlah baharu.

2. Kaedah pelaksanaan fungsi pengiraan

Dalam Vue.js, sifat yang dikira boleh ditakrifkan dalam dua cara.

1. Gunakan bentuk definisi objek

Tentukan data yang diperlukan dalam atribut data, kemudian tulis nama atribut yang dikira dan tentukan cara mengira atribut ini dalam atribut yang dikira. Contohnya:

new Vue({
    data: {
        num1: 2,
        num2: 3
    },
    computed: {
        sum: function() {
            return this.num1 + this.num2;
        }
    }
});

Dalam contoh ini, dua atribut data num1 dan num2 ditakrifkan dan jumlah atribut yang dikira ditakrifkan. Nilai jumlah dikira daripada hasil tambah num1 dan num2.

2. Gunakan bentuk definisi fungsi

Fungsi yang dikira boleh digunakan sebagai fungsi untuk menentukan sifat yang dikira, supaya nilai harta yang dikira boleh diperoleh dan ditetapkan. Contohnya:

new Vue({
    data: {
        num1: 2,
        num2: 3
    },
    computed: {
        sum: {
            get: function() {
                return this.num1 + this.num2;
            },
            set: function(newValue) {
                var parts = newValue.split('+');
                this.num1 = parseInt(parts[0], 10);
                this.num2 = parseInt(parts[1], 10);
            }
        }
    }
});

Dalam contoh ini, dua atribut data yang sama num1 dan num2 ditakrifkan dan jumlah atribut yang dikira ditakrifkan. Nilai jumlah dikira daripada hasil tambah num1 dan num2. Walau bagaimanapun, di sini, kami juga mentakrifkan fungsi set untuk menetapkan nilai harta yang dikira. Ia memecahkan nilai harta yang dikira kepada dua nombor dan menetapkannya kepada nilai num1 dan num2 masing-masing.

3. Kesedaran data bergantung dalam fungsi yang dikira

Fungsi yang dikira melaksanakan ciri kesedaran data bergantung, yang bermaksud bahawa apabila data yang bergantung pada atribut yang dikira berubah, fungsi yang dikira akan dimulakan semula secara automatik Mengira nilai harta yang dikira. Ciri ini sangat berguna kerana ia dapat mengurangkan beban kerja pengaturcara dengan berkesan sambil meningkatkan prestasi program.

Sebagai contoh, kita boleh menggambarkan ciri ini menggunakan contoh mudah:

new Vue({
    data: {
        name: 'Tom',
        age: 20,
        yearOfBirth: null
    },
    computed: {
        birthYear: function() {
            var currentYear = new Date().getFullYear();
            return currentYear - this.age;
        }
    }
});

Dalam contoh ini, tahun kelahiran harta yang dikira mengira tahun kelahiran ahli berdasarkan umur mereka. Jika umur ahli berubah, sifat yang dikira akan dikira semula. Beginilah cara fungsi yang dikira mencapai kesedaran data pergantungan. Ciri ini mengurangkan beban pembangun di samping meningkatkan responsif dan prestasi aplikasi.

4. Kesimpulan

Sifat yang dikira ialah fungsi penting Vue.js, dan fungsi yang dikira adalah kunci untuk merealisasikan sifat yang dikira. Dengan melaksanakan ciri sedar data pergantungan, fungsi yang dikira boleh mengemas kini secara automatik nilai sifat yang dikira, dengan itu mengurangkan beban pembangun dan meningkatkan prestasi aplikasi dan kelajuan tindak balas. Untuk pembangunan Vue.js, fungsi yang dikira adalah alat yang sangat diperlukan.

Atas ialah kandungan terperinci Fungsi yang dikira dalam dokumen Vue melaksanakan kesedaran data pergantungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn