Cara menggunakan pengiraan dalam Vue untuk mendengar data responsif dan mengemas kini DOM

Vue ialah rangka kerja JavaScript popular yang menggabungkan pengikatan data responsif dan pembinaan berasaskan komponen untuk memudahkan pembangunan bahagian hadapan. Dikira ialah cara untuk menggunakan data responsif Vue Ia boleh menjana sifat terkira secara dinamik berdasarkan data bergantung, merealisasikan penukaran dan pembentangan data, dan secara automatik menyimpan hasil perantaraan untuk meningkatkan prestasi. Artikel ini akan memperkenalkan cara menggunakan pengiraan untuk mendengar data responsif dan mengemas kini DOM.

1. Penggunaan asas pengiraan

Dalam Vue, kita boleh menggunakan atribut yang dikira untuk mentakrifkan sifat yang dikira. Format sintaks ialah:

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

dengan propertyName ialah nama harta yang dikira dan function() ialah kaedah pengiraan khusus. Kami boleh mengakses atribut data bagi contoh Vue dalam kaedah ini dan mengira nilai atribut, contohnya:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

Dalam contoh ini, kami mentakrifkan totalPrice atribut yang dikira, yang bergantung pada harga dan amaun data, apabila nilainya berubah, nilai totalPrice juga akan dikemas kini secara dinamik. Kami menggunakan {{totalPrice}} dalam templat untuk memaparkan nilai atribut yang dikira ini Kami tidak perlu mengemas kini DOM sendiri secara manual akan melaksanakan kaedah pengiraan atribut dan mengemas kini elemen DOM yang sepadan.

2. Cache pergantungan yang dikira

Satu lagi ciri penting atribut yang dikira ialah cache pergantungan. Ini bermakna selagi data reaktif yang bergantung pada sifat yang dikira tidak berubah, sifat yang dikira tidak akan dikira semula, tetapi akan mengembalikan hasil terakhir secara langsung. Ini boleh mengelakkan pengiraan yang tidak perlu dan meningkatkan kecekapan menjalankan program.

Sebagai contoh, kami membaca jumlahHarga harta yang dikira beberapa kali dalam contoh di atas, contohnya:

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

Seperti yang anda lihat, kami membaca jumlahHarga dua kali. Walau bagaimanapun, totalPrice akan dikira semula hanya apabila harga atau jumlah berubah, dengan itu berkesan mengelakkan pengiraan berulang.

3. Pengira dan penyetel

Selain penggunaan asas yang diperkenalkan di atas, dikira juga menyokong takrifan pengambil dan penetap. Ini bermakna kita boleh melakukan operasi tambahan semasa penugasan harta yang dikira, seperti pengesahan data, pemformatan data, dsb. Format sintaks

pengambil dan penyetel yang dikira adalah seperti berikut:

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

di mana propertyName ialah nama harta yang dikira Nilai sifat yang dikira dikembalikan dalam fungsi get, dan nilai harta yang dikira dikembalikan dalam fungsi yang ditetapkan.

Sebagai contoh, dalam contoh di atas, kami menggunakan penetap untuk mengubah suai harga unit produk, tetapi harga unit tidak boleh kurang daripada 0.

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan data responsif _harga awalan garis bawah untuk menjimatkan harga unit sebenar produk dan mentakrifkan harga sebagai atribut yang dikira dengan operasi pengambil dan penetap. Dalam penetap, kami menentukan sama ada harga yang dimasukkan oleh pengguna adalah nombor negatif Jika ya, mesej ralat akan dikeluarkan, jika tidak, ia ditetapkan kepada _price.

Ringkasan

Berkomputer ialah cara yang sangat mudah untuk menggunakan data responsif dalam Vue Ia boleh menjana sifat terkira secara dinamik berdasarkan data responsif bergantung dan menyimpan hasil perantaraan secara automatik untuk meningkatkan prestasi. Kami boleh melakukan pelbagai operasi data dalam pemeroleh dan penetap sifat yang dikira, seperti pemformatan data, pengesahan data, dsb. Ini boleh memudahkan kod dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Cara menggunakan pengiraan dalam Vue untuk mendengar data responsif dan mengemas kini DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!