Penjelasan terperinci tentang fungsi yang dikira dalam Vue3: aplikasi yang memudahkan penggunaan sifat yang dikira

Vue ialah rangka kerja pembangunan bahagian hadapan yang sangat popular Ia menyediakan fungsi pengiraan atribut terkira yang sangat mudah dan praktikal. Dalam Vue3, fungsi yang dikira juga telah dinaik taraf dan dipertingkatkan, menjadikannya lebih mudah digunakan dan lebih cekap.

dikira ialah fungsi pertama, yang akan mengembalikan nilai, yang boleh digunakan terus dalam templat Vue. Perkara istimewa tentang fungsi yang dikira ialah nilai pulangannya akan berubah secara dinamik mengikut data contoh Vue yang bergantung padanya, dan fungsi yang dikira dinilai dengan malas Selagi data bergantung tidak berubah, fungsi yang dikira tidak akan dikira semula.

Dalam Vue3, fungsi pengiraan telah dipertingkatkan dengan baik. Pada masa lalu, dalam Vue2, jika anda ingin menggunakan fungsi yang dikira, anda mesti menghantar objek kepada contoh Vue Objek ini mengandungi dua kaedah: pengambil dan penetap Kita perlu mengira nilai yang diperlukan dalam kaedah pengambil, dan kemudian kemas kini nilai lain dalam kaedah penetap. Nampaknya sangat membosankan dan terdedah kepada pendua kod dan ralat. Dalam Vue3, kami hanya perlu melakukan pengiraan terus dalam fungsi yang dikira, dan Vue akan mengendalikan logik yang dikemas kini secara automatik untuk kami.

Sebagai contoh, kami mempunyai contoh Vue dengan data berikut:

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  },
  template: `<div>{{fullName}}</div>`
}).mount('#app');

Dalam tika Vue ini, kami telah menentukan dua atribut responsif firstName dan lastName, yang sepadan dengan dua sifat dalam templat . Kotak input di mana pengguna boleh memasukkan kandungan. Dalam fungsi yang dikira, kami mentakrifkan fungsi Nama penuh, yang mengembalikan hasil penyambungan nama pertama dan Nama akhir, iaitu nama penuh yang dimasukkan oleh pengguna. Dalam templat, kami menggunakan fungsi nama penuh secara langsung.

Dalam contoh di atas, fungsi yang dikira adalah sangat mudah Ia hanya melakukan penggabungan rentetan yang mudah, tetapi semua pengiraan dilakukan dalam fungsi yang dikira, bukan dalam templat. Ini bukan sahaja menjadikan kod lebih jelas dan lebih mudah difahami, tetapi juga meningkatkan prestasi kerana fungsi yang dikira hanya dikira semula apabila data berubah.

Dalam Vue3, fungsi yang dikira juga menyediakan API baharu, yang membolehkan kami mentakrifkan kaedah pengambil dan penetap dalam fungsi yang dikira, supaya kami boleh mengira nilai yang diperlukan dalam kaedah pengambil dan dalam Data penetap kemas kini dan pemberitahuan dilakukan dalam kaedah.

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  },
  template: `<div>
               <input v-model="fullName"/>
               {{fullName}}
             </div>`
}).mount('#app');

Dalam contoh ini, kami mentakrifkan sifat nama penuh dalam fungsi yang dikira, yang mengandungi kaedah pengambil dan penetap. Dalam kaedah pengambil, kami mengira nilai nama penuh seperti dalam contoh sebelumnya. Dalam kaedah penetap, kami menerima nilai parameter, iaitu Nama penuh yang dimasukkan oleh pengguna. Dalam kaedah setter, kami membahagikan nama penuh kepada firstName dan lastName melalui ruang, dan kemudian menetapkannya kepada sifat yang sepadan bagi contoh Vue. Dengan cara ini, kita boleh memasukkan nama penuh dalam kotak input, dan kemudian memaparkan hasil pengiraan dalam templat melalui pengikatan dua hala.

Untuk meringkaskan, fungsi pengiraan dalam Vue3 sangat memudahkan penggunaan sifat yang dikira. Kami boleh melengkapkan semua pengiraan dan mengemas kini logik terus dalam fungsi yang dikira dan bukannya mentakrifkan kaedah pengambil dan penetap secara manual seperti sebelum ini. Peningkatan ini bukan sahaja menjadikan kod lebih ringkas dan mudah difahami, tetapi juga meningkatkan kecekapan dan prestasi pengkomputeran. Jika anda menggunakan Vue3, amat disyorkan anda menggunakan fungsi yang dikira untuk mengira dan memproses data.

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