sifat objek vue3 berubah

Dengan keluaran rasmi Vue3, pembangun tidak sabar untuk mencuba ciri baharu dan peningkatan yang dibawa oleh versi baharu. Salah satu perubahan yang paling ketara ialah perubahan sifat objek. Dalam Vue2, jika kita ingin memantau perubahan dalam sifat objek, kita perlu menggunakan pemerhatian mendalam atau menggunakan $watch untuk memantau perubahan sifat secara manual. Walau bagaimanapun, dalam Vue3, masalah ini telah diselesaikan.

Vue3 menyediakan mekanisme pemantauan dan tindak balas automatik untuk perubahan dalam sifat objek dengan menggunakan objek Proksi. Ini bermakna kita boleh mengendalikan objek dalam Vue3 sama seperti objek JavaScript biasa dan boleh mencetuskan kemas kini pada paparan secara automatik.

Mari kita lihat butiran pelaksanaan khusus.

Pertama, katakan kita mempunyai komponen Vue3 yang mengandungi objek keadaan secara dalaman dan kita mahu mendengar perubahan dalam sifat objek. Kita boleh mentakrifkan objek ini dan menetapkannya kepada keadaan komponen:

<template>
  <div>
    <p>属性A: {{ obj.A }}</p>
    <p>属性B: {{ obj.B }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        A: '初始值A',
        B: '初始值B'
      }
    }
  }
}
</script>

Dalam Vue2, jika kita ingin memantau perubahan dalam sifat objek, kita perlu menggunakan $watch atau $watchEffect untuk memantau setiap harta secara manual . Contohnya:

this.$watch('obj.A', (newValue, oldValue) => {
  console.log(`属性A发生了变化：${oldValue} => ${newValue}`)
})

Dalam Vue3, kita boleh menggunakan objek Proksi untuk mendengar semua perubahan sifat objek sasaran tanpa menulis $watch atau $watchEffect:

<script>
export default {
  data() {
    return {
      obj: {
        A: '初始值A',
        B: '初始值B'
      }
    }
  },
  created() {
    this.obj = new Proxy(this.obj, {
      set(target, key, value, receiver) {
        // 触发视图更新
        return Reflect.set(target, key, value, receiver)
      }
    })
  }
}
</script>

Apabila kita mencipta komponen, kami menetapkan keadaan Objek dibungkus ke dalam objek Proksi. Apabila kami mengubah suai sifat objek, objek Proksi secara automatik mencetuskan kemas kini paparan.

Fungsi set objek Proksi akan dipanggil secara automatik apabila sifat objek diubah suai. Pada ketika ini, kita boleh menambah logik kita sendiri dalam fungsi yang ditetapkan, seperti mencetak perubahan harta benda atau memberitahu komponen lain. Walau bagaimanapun, anda mesti memastikan bahawa pernyataan Reflect.set(sasaran, kunci, nilai, penerima) dikembalikan pada penghujungnya, supaya aliran kawalan akan kembali ke mekanisme kemas kini Vue dan paparan akan dikemas kini dengan betul.

Contoh di atas hanyalah demonstrasi mudah Objek Proksi Vue3 melaksanakan lebih banyak ciri dan pilihan untuk pemantauan harta objek yang lebih fleksibel, termasuk penyampai dan penyetel tersuai, mengesahkan kebenaran harta benda, dsb. Pembangun yang berminat boleh merujuk kepada dokumentasi rasmi Vue3 untuk kajian mendalam.

Ringkasnya, objek Proksi Vue3 membolehkan kami mengendalikan objek di dalam komponen secara lebih semula jadi, sambil turut mengurangkan jumlah kod yang memerlukan pemantauan manual yang membosankan terhadap perubahan harta benda. Ini membawa pengalaman yang lebih cekap dan mudah kepada pembangunan kami.

Atas ialah kandungan terperinci sifat objek vue3 berubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!