Vue mempunyai pemahaman yang mendalam tentang perbezaan dan senario penggunaan antara dikira dan jam tangan

Vue mempunyai pemahaman yang mendalam tentang perbezaan dan senario penggunaan antara dikira dan jam tangan

Vue ialah rangka kerja bahagian hadapan yang mudah, cekap dan fleksibel Ia mempunyai banyak ciri yang sangat baik, dua yang paling penting yang dikira dan diperhatikan. Kedua-dua ciri ini boleh digunakan untuk mengendalikan data yang sering berlaku dalam aplikasi Vue, tetapi penggunaannya berbeza sama sekali. Dalam artikel ini, kami akan menyelidiki perbezaan dan senario yang boleh digunakan antara pengiraan dan jam tangan, serta membawa beberapa pengalaman dan teknik praktikal kepada pembaca.

dikira ialah sifat pengiraan Vue, yang digunakan untuk mengemas kini data secara automatik apabila data berubah dan boleh dicache. Dikira boleh difahami sebagai beberapa data yang perlu diproses secara dinamik, yang bergantung pada status data lain, seperti contoh berikut:

<template>
  <div>
      <p>商品价格：{{ price }}</p>
      <p>折扣价格：{{ salePrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discount: 0.8
    };
  },
  computed: {
    price() {
      return this.originalPrice;
    },
    salePrice() {
      return this.originalPrice * this.discount;
    }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan harga asal dan harga diskaun, dan kemudian Harga produk dan harga diskaun dikira secara berasingan menggunakan atribut yang dikira. Kod di dalam atribut yang dikira berjalan secara automatik Setiap kali data berubah, ia akan dikira semula dan hasilnya boleh dicache, mengelakkan masalah kecekapan pengiraan berulang.

Sebaliknya, jam tangan ialah ciri pemerhati Vue, yang digunakan untuk bertindak balas kepada fungsi apabila data berubah. Watch boleh memantau perubahan dalam pembolehubah dan melakukan beberapa operasi khusus apabila pembolehubah berubah, seperti contoh berikut:

<template>
  <div>
      <input v-model="inputValue" />
      <p>{{ displayValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      displayValue: ""
    };
  },
  watch: {
    inputValue(newValue) {
      this.displayValue = newValue.toUpperCase();
    }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan kotak input dan teg p, yang masing-masing merupakan input pengguna dan pengguna. huruf besar input ditunjukkan. Fungsi tindak balas untuk pembolehubah inputValue ditakrifkan di bawah atribut jam tangan Apabila pembolehubah inputValue berubah, kami menukar nilai pembolehubah displayValue. Perlu diingatkan bahawa fungsi tindak balas jam tangan tidak mengembalikan apa-apa, tetapi mengubah suai data tika Vue.

Ringkasnya, perbezaan antara pengiraan dan jam tangan terletak pada sama ada pengiraan pasif atau pemprosesan reaktif. Dikira harus digunakan apabila beberapa pemprosesan atau pemformatan khas perlu dilakukan berdasarkan perubahan dalam sebarang data. Apabila anda perlu bertindak balas kepada data secara dinamik dan terdapat beberapa operasi khusus yang perlu dilakukan, jam tangan harus digunakan. Akhir sekali, adalah penting untuk ambil perhatian bahawa mereka adalah bebas antara satu sama lain, harta yang dikira tidak akan diperhatikan oleh jam tangan, dan sebaliknya.

(Coretan kod dalam artikel ini adalah daripada dokumentasi rasmi Vue.)

Atas ialah kandungan terperinci Vue mempunyai pemahaman yang mendalam tentang perbezaan dan senario penggunaan antara dikira dan jam tangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!