Fungsi yang dikira dalam Vue3: memudahkan penggunaan sifat yang dikira

Fungsi yang dikira dalam Vue3: memudahkan penggunaan sifat yang dikira

Vue.js ialah salah satu rangka kerja JavaScript yang paling popular pada masa ini. Sintaks templatnya, pengikatan data, komponenisasi dan ciri lain menjadikan Vue.js semakin banyak digunakan dalam pembangunan bahagian hadapan. Dalam Vue.js, fungsi yang dikira ialah ciri yang sangat praktikal. Ia boleh membantu kami memudahkan kod, mengurangkan pengiraan berulang dan meningkatkan prestasi dan kebolehbacaan kod. Untuk versi Vue.js 3.x, artikel ini akan memperkenalkan secara terperinci penggunaan fungsi pengiraan dan kelebihannya.

1 Definisi dan penggunaan asas fungsi terkira

Fungsi terkira ialah ciri yang sangat praktikal dalam Vue.js, yang boleh membantu kami mengira nilai secara automatik dan mengembalikan hasil berdasarkan ungkapan digunakan dalam templat. Tidak seperti kaedah kaedah, fungsi yang dikira bukan sahaja boleh memanggil kaedah yang ditakrifkan, tetapi juga mendapatkan nilai terus daripada atribut data, dan dikira hanya akan dikira semula apabila nilai atribut itu bergantung kepada perubahan.

Dalam versi Vue.js 3.x, kita boleh mentakrifkan sifat yang dikira dengan menambahkan objek yang dikira pada komponen tersebut. Sebagai contoh, dalam komponen kita perlu mengira jumlah harga barang, kodnya adalah seperti berikut:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      }
    }
  }
</script>

Dalam kod di atas, kami mentakrifkan objek yang dikira, yang mengandungi sifat terkira jumlahHarga. Dalam templat, kami boleh terus menggunakan {{totalPrice}} untuk memaparkan jumlah harga produk. Pada masa ini, totalPrice akan mengira produk harga dan jumlah secara automatik dan mengembalikan hasilnya kepada templat.

2. Ciri-ciri fungsi yang dikira

1. Sifat yang dikira dicache

Dalam Vue.js, fungsi yang dikira mempunyai ciri-ciri caching. Ini bermakna jika data yang bergantung pada kaedah pengiraan tidak berubah, kaedah pengiraan secara langsung mengembalikan hasil cache dan bukannya mengira semula. Ini menjimatkan pengiraan berulang dan meningkatkan prestasi kod. Sebagai contoh, kami boleh mengubah suai kod di atas kepada:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
    <p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      },
      totalPriceNoCache() {
        return this.price * this.amount + Math.random();
      }
    }
  }
</script>

Dalam kod di atas, kami telah menambah harta terkira totalPriceNoCache baharu. Oleh kerana kami menggunakan nombor rawak untuk mengganggu keputusan pengiraan, keputusan akan berbeza setiap kali. Dalam templat, kita dapat melihat bahawa totalPrice hanya dikira sekali, manakala totalPriceNoCache dikira semula setiap kali.

2. Sifat yang dikira boleh bergantung pada sifat lain

Hasil yang dikira dengan kaedah yang dikira boleh berdasarkan bukan sahaja pada sifat data komponen semasa, tetapi juga pada sifat data, yang dikira sifat, dan sifat prop komponen lain. Vue.js secara automatik menjejak kebergantungan ini dan mengira semula hasil kaedah yang dikira apabila kebergantungan berubah.

Sebagai contoh, yang berikut menunjukkan contoh berdasarkan sifat terkira lain:

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.discount + this.tax;
      },
      discount() {
        return this.price * 0.8;
      },
      tax() {
        return this.price * 0.1;
      }
    }
  }
</script>

Dalam kod di atas, kami mentakrifkan tiga sifat yang dikira: jumlahHarga, diskaun dan cukai. Antaranya, pengiraan totalPrice bergantung pada dua atribut yang dikira, diskaun dan cukai.

Ringkasan

Fungsi yang dikira ialah ciri yang sangat praktikal dalam Vue.js, yang boleh membantu kami mengira nilai secara automatik dan mengembalikan hasil berdasarkan ungkapan yang digunakan dalam templat. Tidak seperti kaedah kaedah, fungsi yang dikira bukan sahaja boleh memanggil kaedah yang ditakrifkan, tetapi juga mendapatkan nilai terus daripada atribut data, dan dikira hanya akan dikira semula apabila nilai atribut itu bergantung kepada perubahan. Dalam versi Vue.js 3.x, fungsi yang dikira mempunyai ciri caching, yang boleh menyimpan pengiraan berulang dan meningkatkan prestasi kod. Pada masa yang sama, hasil kaedah pengiraan boleh berdasarkan pada atribut data, atribut dikira dan atribut props komponen lain Vue.js akan menjejaki kebergantungan ini secara automatik untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Fungsi yang dikira dalam Vue3: memudahkan penggunaan sifat yang dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!