Fungsi harta yang dikira dalam Vue3: Membolehkan anda menulis kod yang lebih elegan

Dalam Vue.js, kami sering menggunakan fungsi sifat terkira untuk membantu kami mengurus data dan memaparkan kandungan khusus dalam templat. Dalam Vue.js versi 3, fungsi fungsi harta yang dikira telah menjadi lebih berkuasa dan fleksibel, membolehkan kami menulis kod yang lebih ekspresif dan elegan.

Sifat yang dikira ialah sifat yang dikira berdasarkan satu atau lebih kebergantungan reaktif dalam tika Vue. Apabila kebergantungan reaktif dikemas kini, harta yang dikira mengira semula nilainya dan oleh itu reaktif. Sintaks sifat yang dikira adalah seperti berikut:

computed: {
  propName: function() {
    // return value based on reactive dependencies
  }
}

Dalam Vue.js 3, fungsi sifat yang dikira boleh digunakan dalam dua cara berikut:

1. Mentakrifkan fungsi sifat yang dikira melalui kaedah computed

Fungsi sifat yang dikira boleh ditakrifkan dengan lebih mudah menggunakan fungsi computed dalam Vue.js 3. Ia boleh menerima fungsi sebagai parameter dan mengembalikan rujukan reaktif yang secara automatik mengira dan mengemas kini nilainya.

Sebagai contoh, katakan kita mempunyai komponen yang perlu mentakrifkan sifat yang dikira dengan mengira jumlah dua pembolehubah. Dalam Vue.js 3, kita boleh menulis seperti ini:

<template>
  <div>{{ sum }}</div>
</template>

<script>
import { computed } from 'vue';

export default {
  setup() {
    const num1 = 2;
    const num2 = 3;
    
    const sum = computed(() => {
      return num1 + num2;
    });
    
    return { sum };
  }
}
</script>

Dalam contoh di atas, kami menggunakan fungsi computed dalam Vue.js 3 untuk mentakrifkan sifat yang dikira sum. computed Fungsi boleh menerima sebagai argumen fungsi yang menggunakan API reaktif Vue.js 3 untuk mengira nilai harta yang dikira. Kami mentakrifkan dua pembolehubah num1 dan num2 dan kemudian menggunakan fungsi anak panah untuk mengembalikan jumlahnya. Akhir sekali, kami mengembalikan sum sifat yang dikira dalam pilihan komponen.

2. Mentakrifkan fungsi harta terkira menggunakan fungsi ref dan watch

Satu lagi cara biasa untuk menggunakan fungsi harta terkira dalam Vue.js 3 ialah menggunakan ref dan watch fungsi. Dalam kes ini, kita boleh menggunakan fungsi ref untuk mentakrifkan nilai permulaan fungsi atribut yang dikira, dan kemudian menggunakan fungsi watch untuk mentakrifkan logik pengiraan dan kebergantungan responsifnya bagi fungsi atribut yang dikira.

<template>
  <div>{{ sum }}</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const num1 = ref(2);
    const num2 = ref(3);
    const sum = ref(num1.value + num2.value);

    watch([num1, num2], () => {
      sum.value = num1.value + num2.value;
    });

    return { sum };
  }
}
</script>

Dalam contoh di atas, kita mula-mula menggunakan fungsi ref untuk mentakrifkan pembolehubah reaktif num1 dan num2, memperuntukkan nilai ​​​​kepada 2 dan 3 masing-masing. Kami kemudian mentakrifkan pembolehubah reaktif ref sekali lagi menggunakan fungsi sum dan menetapkan nilai awalnya kepada num1.value + num2.value.

Seterusnya, kami menggunakan fungsi watch Vue.js 3 untuk memantau perubahan num1 dan num2 Apabila nilai num1 dan num2 berubah, watch fungsi Nilai sum akan dikemas kini secara automatik. Kami menggunakan sum.value untuk mengemas kini nilai harta yang dikira bagi memastikan ia dikemas kini secara responsif ke dalam templat kami.

Ringkasan

Fungsi sifat yang dikira dalam Vue.js 3 membolehkan kami mengurus data dan memaparkan halaman dengan lebih mudah dan cekap. Kita boleh menggunakan fungsi computed atau fungsi ref dan watch untuk mentakrifkan fungsi sifat yang dikira, yang membolehkan kami menulis kod yang lebih elegan dan ekspresif. Menggunakan fungsi harta yang dikira Vue.js 3 membolehkan kami memanfaatkan sepenuhnya sistem reaktif Vue.js dan meningkatkan kebolehselenggaraan dan kebolehgunaan semula aplikasi kami.

Atas ialah kandungan terperinci Fungsi harta yang dikira dalam Vue3: Membolehkan anda menulis kod yang lebih elegan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!