Cara menggunakan pengiraan dalam Vue untuk memantau perubahan dalam berbilang data

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan kaedah untuk membina antara muka pengguna. Pengurusan data dalam Vue disediakan oleh komponen, setiap komponen mempunyai keadaan dan logiknya sendiri. Dalam Vue, kita boleh menggunakan atribut pengiraan untuk menentukan sifat pengiraan responsif. Atribut yang dikira boleh mengemas kini nilainya secara automatik berdasarkan perubahan dalam data lain Oleh itu, dalam beberapa kes, kita boleh menggunakan atribut yang dikira untuk mendengar perubahan dalam berbilang data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan sifat yang dikira dalam Vue untuk memantau perubahan dalam berbilang data.

Dalam Vue, kita boleh menggunakan atribut yang dikira untuk menentukan sifat yang dikira. Sifat yang dikira ialah sifat yang bergantung pada data lain dan nilainya dikira berdasarkan data lain. Atribut yang dikira boleh mengemas kini nilainya secara automatik berdasarkan perubahan dalam data lain dan mempunyai mekanisme caching yang hanya akan dikira semula apabila data bergantung berubah. Sifat yang dikira boleh digunakan seperti sifat biasa Kita boleh mengakses data dan kaedah komponen semasa melalui ini.

Berikut ialah contoh mudah menggunakan atribut yang dikira:

<template>
  <div>
    {{fullName}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>

Dalam contoh di atas, kami mentakrifkan atribut fullName yang dikira, yang bergantung pada dua data firstName dan lastName. Nilai fullName dikira dengan menggabungkan firstName dan lastName. Kami menggunakan fullName dalam templat komponen Apabila nilai firstName atau lastName berubah, nilai fullName juga akan dikemas kini secara automatik.

Dalam pembangunan sebenar, kita mungkin perlu memantau perubahan dalam berbilang data Dalam kes ini, kita boleh menggunakan atribut yang dikira. Berikut ialah contoh memantau pelbagai perubahan data:

<template>
  <div>
    {{result}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
      z: 0
    }
  },
  computed: {
    result: {
      get() {
        return this.x + this.y + this.z
      },
      set(val) {
        if (val <= 100) {
          this.x = val / 3
          this.y = val / 3
          this.z = val / 3
        } else {
          console.log('结果不能大于100')
        }
      }
    }
  }
}
</script>

Dalam contoh di atas, kami menentukan hasil atribut yang dikira, yang bergantung pada tiga data x, y dan z. Nilai hasil dikira dengan menambah nilai x, y, dan z. Kami mentakrifkan kedua-dua getter dan setter dalam harta yang dikira. Getter digunakan untuk mendapatkan nilai harta yang dikira, dan setter digunakan untuk menetapkan nilai harta yang dikira. Apabila kita mengikat hasil melalui model-v, kaedah penetap bagi atribut yang dikira akan dicetuskan Jika nilai yang dikira lebih daripada 100, mesej amaran akan dikeluarkan kepada konsol. Jika tidak, x, y dan z bagi sifat yang dikira akan diagihkan sama rata mengikut keputusan yang dikira, dengan itu mengemas kini keadaan komponen.

Selain contoh di atas, kami juga boleh menggunakan atribut jam tangan untuk memantau perubahan dalam berbilang data. Atribut jam tangan boleh memantau perubahan dalam data tertentu dan melaksanakan fungsi tertentu Perbezaan antaranya dan atribut yang dikira ialah atribut jam tangan biasanya digunakan untuk memantau perubahan dalam data dan melakukan beberapa kesan sampingan, manakala atribut yang dikira digunakan untuk mengira. atribut dan mengembalikan data baharu.

Dalam Vue, kami boleh menggunakan atribut yang dikira untuk memantau perubahan dalam berbilang data Teknik ini boleh membantu kami mengurus keadaan komponen dengan lebih baik. Sifat yang dikira boleh mengemas kini nilainya secara automatik berdasarkan perubahan dalam data lain, dan mempunyai mekanisme caching Berbanding dengan menggunakan sifat jam tangan, menggunakan sifat yang dikira boleh mengurangkan pengiraan dan kemas kini yang tidak perlu.

Atas ialah kandungan terperinci Cara menggunakan pengiraan dalam Vue untuk memantau perubahan dalam berbilang data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!