Data Vue melaksanakan responsif

Vue.js ialah rangka kerja JavaScript progresif untuk membina antara muka UI. Vue.js dilengkapi dengan banyak ciri berkuasa, salah satunya ialah pengikatan data reaktif.

Dalam pembangunan bahagian hadapan tradisional, anda perlu menggunakan operasi DOM untuk mengemas kini paparan secara manual apabila data berubah. Kaedah ini jelas sangat menyusahkan, jadi Vue.js menyediakan mekanisme responsif data (Kereaktifan). Vue.js akan memantau perubahan data secara automatik dan mengemas kini antara muka secara automatik apabila data berubah, menjadikannya sangat mudah untuk kami mengemas kini halaman secara dinamik.

Artikel ini akan memperkenalkan cara melaksanakan data responsif dalam Vue.js, dan membincangkan prinsip dan aplikasinya.

Apakah itu data reaktif

Dalam Vue.js, kami biasanya menggunakan pilihan data untuk mentakrifkan data komponen. Contohnya:

export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
}

Dalam kod di atas, kami menggunakan pilihan data untuk mentakrifkan data bernama message dengan nilai awal 'Hello, Vue!'. Sekarang, jika kita mengubah suai nilai message dalam komponen, contohnya:

this.message = 'Hello, World!';

Vue.js akan mengemas kini antara muka secara automatik dan menukar teks yang dipaparkan dalam paparan daripada 'Hello, Vue!' kepada 'Hello, World!'.

Mekanisme untuk mengemas kini paparan secara automatik ini ialah mekanisme data responsif Vue.js. Apabila kami mengubah suai data, Vue.js akan mengesan perubahan dalam data ini secara automatik dan mengemas kini perwakilan data ini dalam paparan.

Cara melaksanakan data responsif

Prinsip teras Vue.js melaksanakan data responsif adalah untuk merampas fungsi setter dan getter data melalui kaedah Object.defineProperty().

Apabila kami mendapat nilai sifat data Reaktif, fungsi pengambil akan dipanggil, jadi Vue.js akan mengetahui bahawa anda ingin mengakses data ini.

Apabila kami menetapkan nilai sifat data Reaktif, fungsi penetap akan dipanggil, supaya Vue.js akan mengetahui bahawa data sedia untuk diubah suai dan melaksanakan operasi kemas kini yang sepadan.

Sebagai contoh, data message dalam contoh di atas diproses secara kasar secara dalaman oleh Vue.js seperti ini:

// 定义数据
let data = { message: 'Hello, Vue!' };

// 转化为响应式数据
Object.defineProperty(data, 'message', {
  get() {
    // 当获取 message 的值时，返回 data 中 message 对应的值
    return this._message;
  },
  set(value) {
    // 当设置 message 的值时，同时更新 data 中 message 对应的值，并更新视图
    this._message = value;
    updateView();
  },
});

// 修改数据
data.message = 'Hello, World!'; // 触发 setter 函数，更新 data 和视图

Melalui kaedah Object.defineProperty(), kami mentakrifkan Reaktif bernama message harta data. Apabila mendapat nilai sifat ini, Vue.js akan memanggil fungsi get() Apabila menetapkan nilai sifat ini, Vue.js akan memanggil fungsi set().

Dengan cara ini, kami mendapat data responsif yang boleh dikemas kini secara automatik.

Aplikasi data responsif

Mekanisme data responsif membawa banyak faedah kepada Vue.js. Kami boleh mengubah suai data secara langsung dalam komponen tanpa memanggil operasi DOM secara manual, dengan itu meningkatkan kecekapan pembangunan dan pengalaman pembangunan.

Selain itu, Data Reaktif menyokong pelbagai ciri lanjutan seperti sifat yang dikira dan pendengar.

Sifat terkira

Sifat terkira merujuk kepada mentakrifkan sifat dalam komponen Nilai sifat ini tidak diperoleh secara langsung daripada data, tetapi perlu dikira. Manfaat harta yang dikira ialah ia boleh menyimpan hasil pengiraan dan mengemas kininya secara automatik apabila objek yang dikira berubah.

Contohnya:

export default {
  name: 'MyComponent',
  data() {
    return {
      firstName: '',
      lastName: '',
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
  },
}

Dalam kod di atas, kami mentakrifkan sifat yang dikira bernama computed melalui fullName. Atribut ini secara automatik akan mengira nama penuh semasa berdasarkan ungkapan this.firstName + ' ' + this.lastName dan bukannya mendapatkannya daripada data.

Jika kami mengubah suai nilai firstName atau lastName, atribut fullName akan mengira semula dan mengemas kini antara muka secara automatik tanpa perlu kami memanggil kaedah kemas kini secara manual.

Pendengar

Pendengar merujuk kepada mentakrifkan fungsi mendengar dalam komponen Fungsi mendengar ini akan dicetuskan secara automatik apabila data tertentu berubah, dengan itu melengkapkan beberapa operasi yang berguna.

Contohnya:

export default {
  name: 'MyComponent',
  data() {
    return {
      message: '',
    };
  },
  watch: {
    message(newVal, oldVal) {
      // 监听 message 变化，做相应的处理
    },
  },
}

Dalam kod di atas, kami mentakrifkan pendengar bernama watch melalui message. Pendengar ini akan dicetuskan secara automatik apabila nilai message berubah, supaya operasi tertentu dapat diselesaikan.

Sebagai contoh, dalam beberapa kes, kami perlu menghantar permintaan kepada pelayan untuk mengemas kini data apabila message berubah. Pada masa ini, kami boleh memantau watch perubahan dalam message dan menyelesaikan operasi permintaan dalam fungsi panggil balik.

Ringkasan

Mekanisme data responsif Vue.js ialah salah satu ciri terasnya, yang membolehkan kami melaksanakan kemas kini automatik data dan paparan dengan mudah. Dalam Vue.js, kami menggunakan data untuk mentakrifkan data reaktif dan menggunakan ciri lanjutan seperti sifat yang dikira dan pendengar untuk melanjutkan lagi fungsi pengikatan data.

Atas ialah kandungan terperinci Data Vue melaksanakan responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!