Banyak properti atau properti-objek: kriteria pemilihan

Menggunakan Vue, kami mengembangkan komponen dari berbagai jenis dan kondisi penggunaan. Salah satu bagian penting dari komponen apa pun adalah antarmuka. Dalam Vue, properti yang lewat adalah bagian antarmuka komponen yang sangat penting, jika bukan yang paling penting.

Dalam situasi di mana komponen memerlukan banyak data, beberapa metode mentransfernya dapat diterapkan. Pertimbangkan mereka.

Properti diatur

Salah satu cara yang mungkin adalah membuat properti terpisah untuk setiap nilai atom. Mari kita lihat kode komponen menggunakan pendekatan serupa:

Pola

<template> <div> <div>First name: {{ firstName }}</div> <div>Last name: {{ lastName }}</div> <div>Birth year: {{ birthYear }}</div> </div> </template> 

Skrip

 const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { firstName: { type: String, required: true, validator: firstName => firstName !== '' }, lastName: { type: String, required: true, validator: lastName => lastName !== '' }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() } } } 

Mari kita lihat penggunaan komponen ini.

  <!-- Other part of html template--> <PersonInfo first-name="Jill" last-name="Smith" :birth-year="2000" /> <!-- Other part of html template--> 

Pertimbangkan kelebihan dan kekurangan dari pendekatan ini

Manfaatnya

• Semua properti bersifat independen. Jika salah satu nilai tidak valid, pesan kesalahan akan lebih akurat.
• Konten properti yang ditransfer jelas
• "Flat lebih baik daripada bersarang"
• Menambahkan properti opsional baru cukup mudah: cukup tambahkan properti yang menggunakan parameter default

 props: { firstName: { type: String, required: true, }, lastName: { type: String, required: true, }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() }, city: { type: String, default: 'New York' } } 

Kekurangan

• Kode verbose yang cukup dalam komponen induk, terutama ketika data diambil dari satu objek. Contoh:

  <!-- Other part of html template--> <PersonInfo :first-name="person.firstName" :last-name="person.lastName" :birth-year="person.birthYear" /> <!-- Other part of html template--> 

• Verbositas dalam definisi properti (dibandingkan dengan deskripsi objek)

Properti objek

Ada situasi ketika data atom bukan tipe primitif. Dalam contoh yang diberikan, data tersebut dapat berupa objek person .

Pertimbangkan sebuah contoh:

Pola

 <template> <div> <div>First name: {{ person.firstName }}</div> <div>Last name: {{ person.lastName }}</div> <div>Birth year: {{ person.birthYear }}</div> </div> </template> 

Skrip

 import quartet from 'quartet' // npm validation package const v = quartet() const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { person: { type: Object, required: true, validator: v({ firstName: 'string', lastName: 'string', birthYear: v.and( 'safe-integer', v.min(MIN_BIRTH_YEAR), v.max(new Date().getFullYear()) ) }) } } } 

Mari kita lihat penggunaan:

  <!-- Other part of html template--> <PersonInfo :person="person"/> <!-- or (bad) --> <PersonInfo :person="{ firstName: 'Jill', lastName: 'Smith', birthYear: 2000 }"/> <!-- Other part of html template--> 

Pertimbangkan kelebihan dan kekurangannya

Manfaatnya

• Kode dalam komponen induk menjadi lebih pendek
• Jika ada struktur data tertentu yang tidak berubah, kode menjadi kurang berlebihan

Kekurangan

• Semua nilai menjadi terikat oleh satu objek. Jika salah satu nilai tidak valid - pesan kesalahan akan menunjukkan bahwa seluruh objek tidak valid
• Saat menggunakan objek dalam komponen induk: konten dari data yang dikirimkan tersembunyi di balik abstraksi objek ini
• Tingkat tambahan bersarang di komponen
• Menambahkan properti opsional baru dengan nilai-nilai di dalam objek tidak mungkin (saya tidak tahu bagaimana melakukan ini)
• Untuk memvalidasi objek pada tingkat yang sama, Anda harus menggunakan alat validasi tambahan (mis. Pustaka validasi quartet )

Kesimpulan

Saya sampai pada kesimpulan berikut:

• penggunaan properti individual lebih disukai.
• Penggunaan properti objek diizinkan ketika struktur data objek ini tidak diisi ulang dengan bidang opsional tambahan dengan nilai default.

P. S

Saya akan senang mengetahui kriteria pilihan Anda. Pendekatan apa yang Anda gunakan dan mengapa? Dalam hal lain, ini adalah tujuan utama penulisan artikel ini. Bisakah ada di antara Anda yang tahu praktik terbaik dan alasannya? Terima kasih untuk waktu anda

Pembaruan 19:26, 01/16/2019

Ada juga opsi ketiga, c v-bind. Lihat diskusi di sini