Asas Sifat Dikira dalam Vue.js: API Komposisi

Sifat Dikira

Mari kita pertimbangkan objek reaktif:

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

Dalam objek ini, kami ingin memaparkan mesej yang menunjukkan sama ada pengarang telah menerbitkan buku:

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

Kami telah melakukan pengiraan berdasarkan author.books. Mesej yang dipaparkan dalam templat bergantung pada nilai author.books. Kita boleh menggunakan pengiraan ini beberapa kali dalam templat tetapi tidak mahu menulisnya berulang kali. Oleh itu, sifat yang dikira hendaklah digunakan untuk logik kompleks yang melibatkan data reaktif.

Menggunakan Sifat Berkomputer Contoh:

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// A computed reference
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

Dalam contoh ini, kami menentukan harta yang dikira bernama publishedBooksMessage. Fungsi computed() menjangkakan fungsi getter, dan nilai yang dikembalikan ialah rujukan terkira. Anda boleh mengakses hasil pengiraan menggunakan publishedBooksMessage.value. Walau bagaimanapun, dalam templat, rujukan yang dikira dibuka secara automatik, jadi anda boleh merujuknya tanpa menambah .value.

Sifat yang dikira jejak kebergantungan reaktifnya. Vue tahu bahawa pengiraan publishedBooksMessage bergantung pada nilai author.books dan apabila author.books berubah, ia mengemas kini semua konteks yang bergantung pada publishedBooksMessage.

Caching Berkomputer lwn. Kaedah

Hasil yang sama boleh dicapai menggunakan kaedah:

<p>{{ calculateBooksMessage() }}</p>

Dalam komponen:

function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

Anda boleh mentakrifkan fungsi yang sama sebagai kaedah dan bukannya harta yang dikira. Kedua-dua pendekatan membuahkan hasil yang sama. Walau bagaimanapun, saya ingin menekankan bahawa sifat yang dikira dicache. Ini bermakna bahawa a
sifat yang dikira dinilai semula hanya apabila kebergantungan reaktifnya berubah. Jika nilai author.books tidak berubah apabila komponen dipaparkan semula, ia akan mengembalikan hasil yang dikira sebelum ini tanpa menjalankan semula fungsi getter.

Mengapa Caching Diperlukan?

Pertimbangkan senario di mana kami mempunyai senarai pengiraan yang mahal yang memerlukan gelung melalui tatasusunan yang besar dan melakukan banyak pengiraan. Jika kami mempunyai sifat pengiraan lain yang bergantung pada senarai, tanpa caching, kami akan menjalankan pengambil senarai kami dengan lebih kerap daripada yang diperlukan!

Amalan Terbaik

Getters hendaklah bebas kesan sampingan. Adalah penting bahawa fungsi getter yang dikira hanya melaksanakan pengiraan tulen dan mengelakkan kesan sampingan.

Contohnya, jangan tukar keadaan lain, buat permintaan tak segerak atau ubah DOM dalam pengiraan pengira! Fikirkan sifat yang dikira sebagai cara untuk memperoleh nilai daripada nilai lain—tanggungjawab sepenuhnya adalah untuk mengira dan mengembalikan nilai tersebut.

Kesimpulan

Kami belajar cara melakukan pengiraan dengan data reaktif dalam Vue.js. Untuk memastikan prestasi tinggi aplikasi, kita harus menggunakan sifat yang dikira untuk operasi berdasarkan data reaktif dalam Vue.js.

Atas ialah kandungan terperinci Asas Sifat Dikira dalam Vue.js: API Komposisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!