Penjelasan terperinci tentang fungsi yang dikira dalam Vue3: penggunaan mudah bagi sifat yang dikira

Penjelasan terperinci tentang fungsi yang dikira dalam Vue3: Penggunaan sifat terkira yang mudah

Sifat terkira ialah kaedah yang biasa digunakan dalam Vue Ia digunakan terutamanya untuk meletakkan pengiraan logik dalam templat untuk memudahkan manipulasi data dan paparan pemaju. Dalam Vue3, sifat yang dikira masih merupakan fungsi yang sangat penting, dan fungsi yang dikira adalah lebih mudah untuk menggunakan sifat yang dikira. Artikel ini akan memberikan pengenalan dan penjelasan terperinci tentang fungsi yang dikira dalam Vue3.

Apakah fungsi yang dikira?

Fungsi yang dikira ialah fungsi terbina dalam dalam Vue3. Dengan menggunakan fungsi yang dikira, kita boleh membuat harta terkira dengan mudah, menjadikan kod lebih ringkas dan boleh dibaca. Fungsi yang dikira diisytiharkan secara berfungsi dalam contoh komponen, dan ia akan dikemas kini secara automatik apabila pembolehubah reaktif yang sifat dikira bergantung pada perubahan.

Penggunaan asas fungsi terkira

Menggunakan fungsi terkira untuk mencipta sifat terkira, anda hanya perlu mengisytiharkan sifat berfungsi dalam komponen. Berikut ialah kod contoh mudah yang menggunakan fungsi yang dikira untuk mencipta sifat terkira:

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

Dalam kod contoh di atas, kami mentakrifkan nilai atribut data untuk mewakili nilai asal harta yang dikira. Dua sifat yang dikira dicipta melalui fungsi yang dikira, iaitu didarab dan didarabDua. Antaranya, didarab bergantung pada pembolehubah nilai dalam atribut data, manakala darabByTwo bergantung kepada didarab. Dengan cara ini, kita boleh dengan mudah mendayakan sifat yang dikira dan mengira nilai yang berkaitan dalam masa nyata.

Penggunaan lanjutan fungsi pengiraan

Fungsi yang dikira juga mempunyai beberapa penggunaan lanjutan, yang boleh mengawal kelakuan atribut terkira dengan lebih baik Ia akan diperkenalkan satu demi satu di bawah.

1. Getters dan Setters

Fungsi yang dikira boleh mengawal bacaan dan pengemaskinian sifat yang dikira melalui getter dan setters. Getter ialah fungsi baca untuk sifat yang dikira, dan setter ialah fungsi kemas kini untuk sifat yang dikira. Secara lalai, sifat yang dikira adalah baca sahaja dan tidak boleh diubah, tetapi melalui fungsi setter, kami boleh mengubah suai secara langsung nilai harta yang dikira untuk mencapai tujuan kemas kini paksa.

Berikut ialah contoh kod harta yang dikira menggunakan getter dan setter:

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

Dalam kod contoh di atas, kami mengisytiharkan harga hartanah yang dikira dan mentakrifkan fungsi getter dan settersnya. harga diskaun bergantung pada harga Apabila harga berubah, harga diskaun akan dikemas kini secara automatik. Selain itu, kami juga telah mentakrifkan kaedah applyDiscount, yang boleh mengubah suai secara langsung harga atribut yang dikira dengan melaksanakan kaedah ini, supaya kemas kini paksa atribut yang dikira boleh dicapai.

2. Caching sifat yang dikira

Dalam Vue3, caching sifat yang dikira didayakan secara lalai. Ini bermakna jika pembolehubah bersandar bagi harta yang dikira tidak berubah, harta yang dikira akan terus mengembalikan hasil terakhir dan bukannya mengira semula. Ini menjimatkan masa dan prestasi pengkomputeran serta meningkatkan kecekapan pelaksanaan kod.

Berikut ialah kod sampel untuk caching atribut yang dikira:

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

Dalam kod sampel di atas, kami mengisytiharkan atribut terkira ComputedValue, yang digunakan untuk mengira hasil darab dan pengganda. Selepas kitaran hayat yang dipasang, harta yang dikira dilaksanakan sekali, dan cache harta yang dikira akan didayakan. Dalam kaedah updateCount, kami mencetuskan pengiraan semula computedValue dengan mengemas kini nilai pembolehubah kiraan. Pada masa ini, anda boleh menemui dalam konsol bahawa sifat yang dikira hanya akan dikira semula apabila nilai berubah.

Jika anda tidak mahu mendayakan caching sifat yang dikira, anda boleh menggunakan fungsi ref dalam fungsi yang dikira. Fungsi ref mengembalikan objek responsif, dan fungsi pengiraan dikira semula setiap kali objek itu diakses.

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

Ringkasan

Fungsi yang dikira ialah fungsi yang sangat penting dalam Vue3 Ia memberikan kami cara yang sangat mudah untuk mengendalikan data dengan mencipta sifat terkira. Melalui pengenalan artikel ini, saya percaya bahawa pembaca mempunyai pemahaman asas tentang fungsi pengiraan dan telah menguasai beberapa penggunaan dan teknik lanjutan. Dalam pembangunan Vue3, menguasai penggunaan fungsi yang dikira pasti akan membawa bantuan besar kepada kerja pengekodan kami.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi yang dikira dalam Vue3: penggunaan mudah bagi sifat yang dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!