Bolehkah pembolehubah masih diubah suai selepas vue dipasang?

Rangka kerja Vue ialah rangka kerja JavaScript popular yang menggunakan pemaparan deklaratif untuk mewujudkan hubungan antara paparan dan model melalui pengikatan data. Aplikasi Vue biasanya melibatkan mencipta dan menyediakan tika Vue, menentukan komponen dan sifat data, menetapkan sifat yang dikira dan mengemas kini keadaan aplikasi apabila diperlukan.

Artikel ini akan meneroka soalan biasa, iaitu sama ada pembolehubah boleh diubah suai selepas tika Vue dipasang. Jawapannya ya! Malah, tika Vue menyediakan pelbagai cara untuk mengubah suai sifat dan keadaan data, termasuk menggunakan sifat yang dikira, pengendali peristiwa, sifat boleh diperhatikan, kaedah dan banyak lagi.

Mula-mula, mari kita lihat cara mentakrif dan mengubah suai sifat data dalam tika Vue. Dalam contoh Vue, anda boleh menggunakan pilihan data untuk menentukan atribut data, contohnya:

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

Dalam kod di atas, kami mentakrifkan tika Vue dan menetapkan atribut data, iaitu mesej. Nilai hartanah ini ialah "Hello, Vue!". Bagaimana untuk mengubah suai nilai atribut data ini selepas dipasang? Kita boleh menggunakan kaedah Vue.set untuk mengubahnya:

Vue.set(app, 'message', 'Hello, World!');

Menggunakan kaedah Vue.set akan memberitahu contoh Vue bahawa kita ingin mengemas kini sifat data, dan Vue akan mengemas kini paparan dalam komponen secara automatik kepada mencerminkan perubahan ini.

Kedua, sifat yang dikira juga sangat berguna untuk membolehkan kami mengira nilai baharu berdasarkan sifat data sedia ada. Kelebihan sifat yang dikira ialah ia menyimpan hasil carian dan tidak dikira semula selagi data bergantung tidak berubah. Ini boleh meningkatkan prestasi dengan ketara.

const app = new Vue({
  el: '#app',
  data: {
    firstName: 'Tom',
    lastName: 'Smith'
  },
  computed: {
    fullName() {
      return `${this.lastName}, ${this.firstName}`;
    }
  }
});

Dalam kod di atas, kami mentakrifkan sifat terkira fullName, yang dikira berdasarkan sifat data firstName dan lastName. Jika firstName atau lastName diubah suai, tika Vue akan mengira semula secara automatik nilai fullName dan mengemas kini paparan.

Selain sifat yang dikira, Vue juga menyokong sifat yang boleh diperhatikan. Sifat boleh diperhatikan membolehkan anda mendengar perubahan dalam pembolehubah dan melakukan beberapa tindakan apabila perubahan berlaku. Katakan kita mentakrifkan kiraan atribut data dan bilangan kuasa dua atribut diperhatikan:

const app = new Vue({
  el: '#app',
  data: {
    count: 2,
    squareCount: null
  },
  watch: {
    count() {
      this.squareCount = this.count * this.count;
    }
  }
});

Dalam kod di atas, kami mentakrifkan bilangan kuasa dua atribut diperhatikan yang mendengar perubahan dalam atribut kiraan dan mengira semula kuasa dua nilai kiraan. Jika kita ingin mengubah suai nilai harta kiraan, hanya laksanakan kod berikut:

app.count = 3;

Tindakan Vue akan secara automatik memanggil sifat pemerhatian untuk mengira nilai baharu squareCount. Akhir sekali, kita juga boleh menggunakan kaedah dalam contoh Vue untuk mengubah suai sifat data. Katakan kami mentakrifkan kaedah yang mengubah suai nama pertama:

const app = new Vue({
  el: '#app',
  data: {
    firstName: 'Tom',
    lastName: 'Smith'
  },
  methods: {
    changeFirstName() {
      this.firstName = 'Mike';
    }
  }
});

Dalam kod di atas, kami mentakrifkan kaedah changeFirstName yang menukar firstName kepada "Mike". Jika kita ingin menukar sifat firstName, hanya panggil kaedah changeFirstName di lokasi yang perlu ditukar.

Ringkasnya, pembolehubah dalam contoh Vue boleh diubah suai selepas dipasang. Sebagai tambahan kepada kaedah di atas, Vue juga menyediakan banyak kaedah lain untuk menangani sifat dan keadaan data. Kami mengesyorkan agar pembangun mencuba kaedah ini semasa membina aplikasi untuk mendapatkan lebih kawalan ke atas keadaan dan gelagat aplikasi mereka.

Atas ialah kandungan terperinci Bolehkah pembolehubah masih diubah suai selepas vue dipasang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!