Perbezaan dan senario aplikasi antara dikira dan jam tangan dalam Vue

dikira dan jam tangan ialah dua atribut yang biasa digunakan dalam Vue, dan fungsi serta senario aplikasinya adalah berbeza. Dalam artikel ini, kami akan memperkenalkan perbezaan antara pengiraan dan jam tangan secara terperinci dan memberikan contoh kod khusus.

1. dikira

dikira ialah sifat pengiraan Vue, yang digunakan untuk memproses data dan memperoleh sifat baharu. Sifat yang dikira dicache berdasarkan kebergantungannya dan dikira hanya akan dikira semula apabila kebergantungan yang berkaitan berubah.

Dalam contoh Vue, kita boleh menentukan sifat yang dikira melalui pilihan yang dikira. Berikut ialah contoh:

new Vue({
  data: {
    num1: 2,
    num2: 3
  },
  computed: {
    sum: function() {
      return this.num1 + this.num2;
    }
  }
})

Dalam kod di atas, kami mentakrifkan dua data num1 dan num2, dan mengira jumlahnya melalui atribut pengiraan jumlah.

Apabila atribut yang dikira digunakan, ia boleh digunakan secara langsung dalam templat, dan Vue akan menjejaki kebergantungannya secara automatik Apabila kebergantungan berubah, dikira akan dikira semula. Ini membolehkan kami menggunakan sifat yang dikira secara langsung dalam templat tanpa perlu mengemas kininya secara manual.

<div>num1: {{ num1 }}</div>
<div>num2: {{ num2 }}</div>
<div>sum: {{ sum }}</div>

Apabila num1 atau num2 berubah, jumlah atribut yang dikira akan dikira semula secara automatik.

Atribut yang dikira sesuai untuk senario di mana pengiraan kompleks atau pemprosesan data dilakukan pada data. Ia menyediakan cara ringkas dan cekap untuk memperoleh sifat baharu.

2. watch

watch ialah sifat bagi contoh Vue, yang digunakan untuk memantau perubahan dalam data dan melaksanakan operasi yang sepadan. Atribut jam tangan biasanya digunakan dalam senario di mana operasi tak segerak dan pertimbangan logik yang kompleks perlu dilakukan apabila data berubah.

Begitu juga, dalam contoh Vue, kita boleh mentakrifkan atribut mendengar melalui pilihan jam tangan. Berikut ialah contoh:

new Vue({
  data: {
    num1: 2,
    num2: 3,
    sum: 0
  },
  watch: {
    num1: function(newVal, oldVal) {
      this.sum = newVal + this.num2;
    },
    num2: function(newVal, oldVal) {
      this.sum = this.num1 + newVal;
    }
  }
})

Dalam kod di atas, kami mentakrifkan dua data num1 dan num2, memantau perubahannya melalui pilihan jam tangan dan mengemas kini atribut jumlah apabila ia berubah.

Apabila menggunakan atribut jam tangan, anda perlu mentakrifkan atribut mendengar dan menentukan fungsi panggil balik. Apabila sifat yang dipantau berubah, fungsi panggil balik akan dicetuskan dan menghantar nilai baharu dan nilai lama sebagai parameter.

Atribut jam tangan sesuai untuk senario di mana operasi khusus perlu dilakukan pada perubahan dalam data. Ia boleh memantau perubahan dalam berbilang sifat dan melaksanakan logik yang sepadan apabila ia berubah.

3 Perbezaan dan senario aplikasi antara pengiraan dan jam tangan

Ringkasnya, atribut yang dikira sesuai untuk senario di mana pengiraan kompleks atau pemprosesan data dilakukan pada data, dan ia boleh diperoleh secara ringkas Atribut baharu dijana dan hanya dikira semula apabila kebergantungan berkaitan berubah.

Atribut jam tangan lebih sesuai untuk senario di mana operasi tak segerak dan pertimbangan logik yang kompleks perlu dilakukan apabila data berubah Ia boleh memantau perubahan dalam berbilang atribut dan melaksanakan logik yang sepadan apabila ia berubah.

Akhir sekali, kita perlu memilih antara dikira dan menonton berdasarkan keperluan perniagaan tertentu. Dalam pembangunan sebenar, kita boleh memilih atribut yang sesuai berdasarkan kerumitan keperluan dan pertimbangan prestasi.

Atas ialah kandungan terperinci Perbezaan dan senario aplikasi antara dikira dan jam tangan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!