Cara menggunakan atribut yang dikira untuk memproses data responsif dalam Vue

Vue ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Dalam Vue, pengemaskinian data yang responsif ialah salah satu ciri Vue yang paling berkuasa. Dalam Vue, pengikatan data adalah sehala, iaitu, perubahan dalam data akan menjejaskan antara muka, tetapi operasi pada antara muka (seperti input pengguna, dll.) tidak akan menjejaskan data. Kemas kini data ini dilengkapkan secara automatik melalui harta yang dikira dalam Vue.

Atribut yang dikira ialah kaedah yang digunakan dalam Vue untuk memproses data responsif Intipatinya ialah atribut yang dikira. Berbanding dengan kaedah dalam Vue, atribut yang dikira lebih memfokuskan pada pemprosesan pengiraan data dan caching data, membolehkan Vue mengemas kini data dengan lebih cekap. Artikel ini akan memperkenalkan cara menggunakan atribut yang dikira dan langkah berjaga-jaga yang berkaitan.

Penggunaan asas atribut yang dikira

Kaedah untuk mengisytiharkan atribut yang dikira dalam Vue adalah sangat mudah. ​​Cuma tambahkan objek yang dikira pada contoh Vue, contohnya:

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

In. Dalam kod di atas, kami mengisytiharkan contoh Vue dan mentakrifkan sifat reversedMessage dalam objek yang dikira, yang menggunakan sifat mesej untuk pengiraan. Apabila nilai atribut mesej berubah, Vue akan mengemas kini secara automatik nilai yang dikira bagi reversedMessage dan memberikannya kepada antara muka.

Perlu diambil perhatian bahawa atribut yang dikira mestilah fungsi. Fungsi ini boleh menerima parameter atau tidak. Di dalam fungsi, gunakan ini untuk mengakses data dalam contoh Vue, tetapi tidak mengakses pembolehubah secara langsung.

Selain itu, nilai atribut yang dikira akan dicache dan hanya akan dikira semula apabila data bergantung berubah, yang boleh meningkatkan kecekapan Vue dengan banyak. Sebagai contoh, dalam contoh di atas, apabila nilai atribut mesej kekal tidak berubah, setiap kali atribut reversedMessage dibaca, nilai yang dikira dalam cache akan dikembalikan terus dan tidak akan dikira semula.

Penggunaan lanjutan atribut terhitung

Penetap dalam atribut terhitung

atribut terhitung bukan sahaja boleh digunakan untuk membaca data, tetapi juga boleh digunakan untuk menetapkan data. Kaedah set yang ditakrifkan dalam atribut yang dikira akan dipanggil apabila atribut diberikan nilai. Contohnya:

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

Dalam contoh di atas, kami menentukan atribut Nama penuh, yang boleh dibaca dan ditulis. Kami menentukan kaedah get yang mengembalikan rentetan gabungan firstName dan lastName. Pada masa yang sama, kaedah set juga ditakrifkan, yang menerima parameter newVal dan menetapkan nilai firstName dan lastName mengikut parameter ini. Perlu diingatkan bahawa fungsi penetap dalam atribut yang dikira tidak mengembalikan sebarang nilai.

Pergantungan atribut yang dikira

Pengiraan atribut yang dikira adalah berdasarkan pada atribut yang bergantung padanya. Apabila sifat bergantung berubah, sifat yang dikira akan dikira semula secara automatik. Vue secara automatik boleh mengumpul kebergantungan yang digunakan dalam atribut yang dikira melalui mekanisme penjejakan kebergantungan. Contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      console.log('computed fullName')
      return this.firstName + ' ' + this.lastName
    },
    reversedName: function () {
      console.log('computed reversedName')
      return this.fullName.split('').reverse().join('')
    }
  }
})

console.log(vm.reversedName)
vm.firstName = 'Tom'
console.log(vm.reversedName)

Dalam kod di atas, kedua-dua fullName dan reversedName bergantung pada sifat firstName dan lastName. Apabila kami mengakses sifat reversedName, Vue akan mengira secara automatik nilai fullName dan reversedName, dan output dikira fullName dan dikira reversedName. Apabila nilai firstName diubah suai, Vue akan mengira semula nilai fullName dan reversedName, dan output dikira fullName dan dikira reversedName.

Perlu diambil perhatian bahawa apabila data yang atribut yang dikira bergantung pada perubahan, pengambil dalam atribut yang dikira dipanggil secara tak segerak. Ini bermakna apabila data bergantung berubah, Vue tidak akan mengemas kini nilai harta yang dikira serta-merta, tetapi akan mengemas kininya dalam gelung peristiwa seterusnya. Ini mengelakkan overhed prestasi yang tidak perlu.

Perbezaan antara atribut yang dikira dan atribut jam tangan

Selain atribut yang dikira, Vue juga menyediakan kaedah lain untuk memproses data responsif - atribut jam tangan. Mereka semua mempunyai keupayaan untuk mengendalikan data reaktif, tetapi mereka berbeza dalam cara mereka melaksanakannya.

Atribut jam tangan ialah pendengar Apabila data berubah, atribut jam tangan akan segera melaksanakan fungsi tindak balas dan mempunyai kesan sampingan memproses data. Contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullName: ''
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

Dalam contoh di atas, kami menentukan atribut jam tangan untuk mendengar perubahan data dan mengemas kini nilai atribut fullName apabila firstName atau lastName berubah. Perlu diingatkan bahawa fungsi pemprosesan dalam atribut jam tangan akan dilaksanakan serta-merta apabila data berubah.

Perbezaan terbesar antara atribut yang dikira dan atribut jam tangan terletak pada senario pelaksanaan dan penggunaannya. Atribut yang dikira lebih sesuai untuk mengendalikan operasi berulang seperti pengiraan data dan caching, yang boleh meningkatkan kecekapan Vue dengan banyak. Atribut jam tangan lebih sesuai untuk memantau perubahan data, seperti mencetuskan kesan animasi atau menghantar permintaan dan operasi kesan sampingan lain apabila data berubah.

Kesimpulan

Dalam Vue, atribut yang dikira ialah salah satu cara paling biasa untuk mengendalikan data reaktif. Atribut yang dikira membolehkan kami memproses data dengan lebih ringkas dan cekap, mengelakkan pengiraan berulang, dan juga meningkatkan prestasi Vue. Apabila menggunakan atribut yang dikira, anda perlu memberi perhatian kepada fungsi penetap, kebergantungan dalam atribut yang dikira dan perbezaan antara atribut yang dikira dan atribut jam tangan.

Atas ialah kandungan terperinci Cara menggunakan atribut yang dikira untuk memproses data responsif dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!