Penjelasan terperinci tentang fungsi harta yang dikira dalam dokumentasi Vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak fungsi dan komponen yang memudahkan pembangunan. Salah satu ciri yang sangat penting ialah fungsi harta yang dikira. Atribut yang dikira boleh mengira secara dinamik nilai atribut baharu berdasarkan data, mengelakkan keperluan untuk mengira secara langsung ungkapan kompleks dalam templat. Artikel ini akan memperkenalkan fungsi harta yang dikira dalam dokumen Vue secara terperinci.

1. Definisi dan penggunaan sifat yang dikira

Harta yang dikira ialah sifat istimewa dalam Vue, dan nilainya ialah fungsi. Contoh mentakrifkan sifat yang dikira dalam objek contoh Vue:

var vm = new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Dalam kod di atas, sifat yang dikira reversedMessage ditakrifkan dalam objek contoh Vue Nilainya ialah fungsi dan ia mengembalikan Terbalik yang diluluskan mesej.

Atribut yang dikira boleh digunakan dalam templat seperti atribut data, contohnya:

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

Apabila memaparkan, "Mesej asal:" dan "Mesej terbalik:" akan memaparkan "Hello World" masing-masing dan " dlroW olleH".

2. Caching atribut yang dikira

Atribut yang dikira mempunyai ciri yang sangat penting, iaitu untuk mengembalikan output yang sama untuk input yang sama, jadi ia dicache. Contohnya, dalam contoh di atas, menggunakan message beberapa kali akan mengembalikan rentetan yang sama selagi reversedMessage tidak berubah.

Ciri ini sangat berguna apabila menggunakan sifat yang dikira dalam templat, kerana ia mengelakkan pengiraan berulang bagi ungkapan kompleks dalam templat.

3. Getter dan setter bagi atribut yang dikira

Dalam atribut yang dikira, fungsi getter adalah perlu dan ia mentakrifkan nilai output bagi atribut yang dikira. Dalam sesetengah kes, anda mungkin perlu menambah fungsi penetap yang mentakrifkan nilai input bagi harta yang dikira.

Contohnya, kita boleh mentakrifkan harta yang dikira fullName, yang pengambilnya mengembalikan rentetan yang digabungkan dengan firstName dan lastName, dan penetap boleh memisahkan kandungan fullName kepada firstName dan lastName.

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // Getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // Setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Dalam kod di atas, kita boleh mendapatkan nama penuh semasa melalui pengambil fullName, atau menetapkan nama penuh baharu melalui penetap. Contohnya:

console.log(vm.fullName) // John Doe

vm.fullName = 'Jane Smith'
console.log(vm.firstName) // Jane
console.log(vm.lastName) // Smith

4. Pengiraan masa nyata bagi atribut yang dikira

Atribut yang dikira ialah cara terbaik untuk melakukan pengiraan masa nyata pada atribut data. Selepas Vue menukar atribut data, ia akan mengira nilai atribut terkira baharu pada kali berikutnya ia perlu memaparkan templat. Jika data yang bergantung pada harta yang dikira tidak berubah, harta yang dikira akan menggunakan nilai yang dicache sebelum ini.

var vm = new Vue({
  data: {
    radius: 5
  },
  computed: {
    diameter: function () {
      return this.radius * 2
    },
    circumference: function () {
      return 2 * Math.PI * this.radius
    }
  }
})

Dalam kod di atas, kami mentakrifkan sifat yang dikira diameter dan circumference, yang kedua-duanya bergantung pada sifat radius. Sifat yang dikira ini dikira semula apabila sifat radius berubah. Contohnya:

console.log(vm.diameter) // 10

vm.radius = 10
console.log(vm.circumference) // 62.83185307179586

5. Perbezaan antara sifat yang dikira dan kaedah

Dalam Vue, terdapat konsep yang hampir sama yang dipanggil Kaedah boleh dipanggil dalam templat menggunakan arahan v-on . Kedua-dua kaedah dan sifat yang dikira boleh menukar nilainya berdasarkan perubahan dalam sifat data.

Jadi apakah perbezaan antara kaedah dan sifat yang dikira?

Pertama, tidak seperti sifat yang dikira, kaedah sentiasa dikira semula dan keputusannya tidak boleh dicache seperti sifat yang dikira. Kaedah umumnya sesuai untuk logik kompleks yang perlu dikira semula setiap kali atau logik yang memerlukan lulus dalam parameter tertentu.

Kedua, sifat yang dikira hanya mempunyai getter, manakala kaedah hanya mempunyai setter. Walaupun kaedah boleh mengembalikan nilai, nilai pulangan tidak dicache.

Akhir sekali, sifat yang dikira boleh digunakan dalam templat semudah sifat data, manakala kaedah mesti dipanggil menggunakan arahan v-on. Jika anda ingin memaparkan nilai harta terkira dalam templat, menggunakan sifat terkira ialah pilihan yang lebih baik.

6. Ringkasan

Dalam Vue, sifat yang dikira ialah cara terbaik untuk mengira sifat data dalam masa nyata. Ia mempunyai ciri caching, mengelakkan pengiraan berulang, boleh melaksanakan beberapa logik perniagaan yang kompleks, dan meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Pada masa yang sama, sifat terkira juga boleh menyediakan fungsi getter dan setter, membolehkan kami mengendalikan sifat terkira secara bebas. Tidak seperti sifat yang dikira, kaedah sentiasa dikira semula, yang sesuai untuk logik yang perlu dikira semula setiap kali atau logik yang perlu lulus parameter. Untuk logik yang sering memerlukan pengiraan, disyorkan untuk menggunakan sifat yang dikira.

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi harta yang dikira dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!