Tidak bolehkah data dalam komponen vue menjadi fungsi?

Tidak, data dalam komponen vue mestilah fungsi. Komponen dalam Vue digunakan untuk digunakan semula Untuk mengelakkan penggunaan semula data, ia ditakrifkan sebagai fungsi. Data data dalam komponen vue harus diasingkan antara satu sama lain dan tidak menjejaskan satu sama lain Setiap kali komponen digunakan semula, data data hendaklah disalin sekali Kemudian, apabila data data dalam komponen ditukar di tempat yang digunakan semula. data lain akan disalin Jika data data komponen tempatan yang digunakan semula tidak terjejas, anda perlu mengembalikan objek sebagai status komponen melalui fungsi data.

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

Atribut data yang ditakrifkan dalam contoh vue boleh sama ada objek atau fungsi

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

Walau bagaimanapun, atribut data yang ditakrifkan dalam komponen hanya boleh menjadi fungsi

Jika data komponen ditakrifkan secara langsung sebagai objek

Vue.component('component1',{
    template:`<div>组件</div>`,
    data:{
        foo:"foo"
    }
})

, anda akan mendapat mesej amaran

Perihalan amaran : Kembalikan Data hendaklah menjadi fungsi dalam setiap contoh komponen

Mengapakah atribut data merupakan fungsi dan bukannya objek?

Atribut data dalam komponen Vue tidak boleh menjadi objek kerana objek itu adalah jenis rujukan, dan komponen tersebut akan dirujuk oleh berbilang kejadian pada masa yang sama Hasilnya ialah berbilang kejadian berkongsi objek, dan salah satu komponen berubah Jika nilai dalam objek data dipadamkan, kejadian lain juga akan terjejas.

Seperti yang ditunjukkan dalam gambar, selepas komponen digunakan semula, mengklik butang secara rawak dalam salah satu komponen juga akan menjejaskan nilai dua komponen yang lain

vue Sebab mengapa data komponen ialah fungsi: data ialah fungsi, dan dengan mengembalikan objek, setiap kejadian boleh mempunyai objek bebasnya sendiri, dan kejadian tidak mempengaruhi satu sama lain seperti yang ditunjukkan dalam rajah di bawah

Kesimpulan

Data objek contoh akar boleh menjadi objek atau fungsi ( instance root ialah singleton), dan tidak akan ada pencemaran data

Data objek instance komponen mestilah satu fungsi Tujuannya adalah untuk menghalang objek berbilang komponen daripada berkongsi data yang sama dan menyebabkan pencemaran data. Dalam bentuk fungsi, ia akan digunakan sebagai fungsi kilang apabila initData akan mengembalikan objek data baharu

Penerangan:

• The komponen dalam vue digunakan Boleh diguna semula, untuk mengelakkan penggunaan semula data, tentukan ia sebagai fungsi.

• Data data dalam komponen vue hendaklah diasingkan antara satu sama lain dan tidak menjejaskan satu sama lain Setiap kali komponen digunakan semula, data data hendaklah disalin sekali tempat tertentu diduplikasi Apabila data data dalam komponen tempatan yang digunakan ditukar, data data komponen tempatan yang digunakan semula tidak akan terjejas. Ia adalah perlu untuk mengembalikan objek sebagai status komponen melalui fungsi data.

• Apabila kita menulis data dalam komponen sebagai fungsi, data ditakrifkan dalam bentuk nilai pulangan fungsi, supaya setiap kali komponen digunakan semula, data baru akan dikembalikan, dengan Skopnya sendiri adalah serupa dengan mencipta ruang data peribadi untuk setiap tika komponen, membenarkan setiap tika komponen mengekalkan datanya sendiri.

• Apabila tarikh komponen kami hanya ditulis dalam bentuk objek, kejadian ini menggunakan pembina yang sama Disebabkan ciri-ciri JavaScript, semua kejadian komponen berkongsi satu data, jadi Ia akan membawa kepada keputusan yang mengubah segala-galanya.

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Tidak bolehkah data dalam komponen vue menjadi fungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!