Penjelasan terperinci tentang fungsi defineProperty dalam Vue3: pemantauan harta objek mudah

Penjelasan terperinci tentang fungsi defineProperty dalam Vue3: Pemantauan sifat objek yang mudah

Vue3, sebagai versi terbaharu rangka kerja Vue, mempunyai banyak ciri baharu yang lain selain daripada pembinaan semula data responsif. Antaranya, defineProperty, API untuk mentakrifkan sifat objek, juga telah menjalani beberapa pengoptimuman. Artikel ini akan menerangkan secara terperinci fungsi defineProperty dalam Vue3 dan kes penggunaan praktikalnya.

Konsep asas fungsi defineProperty

defineProperty ialah fungsi dalam API asli JavaScript Ia boleh mentakrifkan sifat baharu pada objek atau mengubah suai sifat sedia ada. Apabila harta baharu ditakrifkan, kita boleh menentukan beberapa cirinya, seperti sama ada ia boleh dikira, sama ada ia boleh diubah suai, dsb.

Dalam Vue3, fungsi defineProperty telah dipertingkatkan, sintaks dan penggunaannya lebih fleksibel, dan ia boleh digunakan dengan lebih mudah untuk memantau perubahan dalam sifat objek.

Syntax

Dalam Vue3, kita boleh memanggil fungsi defineProperty dengan cara berikut:

Object.defineProperty(obj, prop, descriptor)

• obj: Objek di mana sifat itu akan ditakrifkan.
• prop: Nama harta yang akan ditakrifkan atau diubah suai.
• deskriptor: Deskriptor harta yang akan ditakrifkan atau diubah suai.

Sebagai contoh, kita boleh mentakrifkan sifat objek seperti ini:

let obj = {}
Object.defineProperty(obj, 'nickName', {
  value: 'Bobo',
  writable: false,
  enumerable: true,
  configurable: false
})
console.log(obj.nickName)
// 'Bobo'

Dalam contoh ini, kita mentakrifkan nama panggilan atribut pada objek obj melalui fungsi defineProperty. Atribut nilai menentukan bahawa nilai lalai atribut ini ialah 'Bobo', atribut boleh tulis menyatakan bahawa atribut ini tidak boleh diubah, atribut enumerable menentukan bahawa atribut ini boleh dikira dan atribut boleh dikonfigurasikan menentukan bahawa atribut ini tidak boleh dipadamkan.

Seperti yang dinyatakan di atas, sintaks API ini kelihatan agak bertele-tele dan tidak intuitif, yang merupakan salah satu penambahbaikan yang dibuat oleh Vue3.

Peningkatan fungsi defineProperty dalam Vue3

Mari kita lihat dahulu cara defineProperty digunakan untuk memantau perubahan sifat objek dalam Vue2:

let obj = {
  age: 40
}
Object.defineProperty(obj, 'age', {
  get() {
    console.log('get age:', this._age)
    return this._age
  },
  set(newAge) {
    console.log('set age:', newAge)
    this._age = newAge
  }
})
obj.age = 30
console.log(obj.age)
// 'set age: 30'
// 'get age: 30'
// 30

Dalam contoh ini, kita An atribut umur ditakrifkan pada objek obj. Kami mentakrifkan kaedah get dan set dan letakkannya dalam parameter deskriptor dan hantarkannya ke fungsi defineProperty. Di sini, kami juga menggunakan pembolehubah ahli dalaman _age untuk menyimpan nilai sebenar atribut umur.

Apabila kami mengubah suai atribut umur melalui obj.age=30, kaedah set dipanggil, konsol mengeluarkan 'set umur: 30' dan nilai _age diubah suai. Apabila kami kemudiannya mengakses atribut umur, kaedah get dipanggil, konsol mengeluarkan 'get age: 30' dan nilai _age dikembalikan.

Vue3 menambah baik fungsi defineProperty dalam dua cara utama:

1. Untuk pemantauan keseluruhan objek, sintaksnya lebih ringkas

Dalam Vue3, kami Anda boleh menghantar objek terus ke fungsi reaktif, dan semua sifat dalam objek akan didengari. Sudah tentu, anda juga boleh menggunakan tulisan gaya Vue2. Contoh berikut:

Vue2写法：
const obj = { age: 40 }
const reactiveObj = Vue.reactive(obj)
console.log(reactiveObj.age) // 40

Vue3写法：
const obj = { age: 40 }
const reactiveObj = reactive(obj)
console.log(reactiveObj.age) // 40

Kami akan mendapati bahawa kaedah penulisan Vue3 menggunakan fungsi reaktif baharu untuk menggantikan fungsi Vue.reactive dalam Vue2 Ini menghapuskan keperluan untuk panggilan eksplisit untuk menentukanProperty dan menjadikan sintaks lebih ringkas .

2. Untuk memantau satu sifat, gunakan fungsi ref

Dalam Vue3, untuk memantau satu sifat, kita boleh menggunakan fungsi ref untuk mendengar perubahan.

const age = ref(40)
console.log(age.value) // 40

Kami tidak perlu memanggil fungsi defineProperty secara eksplisit, kami hanya perlu memanggil fungsi ref untuk mendengar. Pada masa ini, objek umur telah mendapatkan dan menetapkan kaedah yang serupa dengan yang ditakrifkan dalam Vue2 Kaedah ini boleh dicetuskan apabila kami mengakses atau menukar atribut nilai.

Ringkasan

Fungsi defineProperty ialah alat yang sangat berguna dalam API asli JavaScript Vue3 telah mengubah suainya untuk menjadikannya lebih mudah untuk memantau perubahan dalam sifat objek. Walaupun penggunaan API ini kelihatan agak bertele-tele, ia sangat berkuasa dan boleh membantu kami menukar objek biasa kepada objek data responsif.

Seperti yang telah kita lihat dalam Vue3, kini kita tidak lagi perlu menggunakan fungsi defineProperty secara eksplisit untuk memantau sifat objek API baharu yang disediakan secara rasmi oleh Vue3 membolehkan kami menyelesaikan operasi kelas ini dengan lebih mudah dan fleksibel. Sudah tentu, jika anda ingin menggunakan fungsi defineProperty secara langsung, anda juga boleh terus menggunakannya seperti Vue2.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi defineProperty dalam Vue3: pemantauan harta objek mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!