Penjelasan terperinci tentang cara menyegerakkan data pada halaman kemas kini jadual Vue

Vue ialah rangka kerja JavaScript popular yang telah digunakan secara meluas dalam pembangunan bahagian hadapan. Semasa proses pembangunan, kita biasanya perlu menggunakan jadual untuk memaparkan data. Apabila data dikemas kini, kami berharap halaman tersebut boleh dikemas kini secara serentak untuk memastikan pengalaman pengguna. Jadi dalam Vue, bagaimanakah jadual mencapai kemas kini data segerak?

1. Mekanisme responsif Vue

Idea teras Vue ialah pengaturcaraan responsif, iaitu apabila data berubah, halaman akan dikemas kini secara automatik. Vue mengambil kesempatan daripada kaedah Object.defineProperty dalam ES6 untuk menambah fungsi getter dan setter bagi setiap sifat. Apabila data berubah, fungsi setter akan dicetuskan dan halaman akan dipaparkan semula.

2. Pengikatan data jadual dalam Vue

Dalam Vue, kami boleh memaparkan data ke dalam jadual melalui arahan v-for. Contohnya:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item,index) in userList" :key="index">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

Antaranya, userList ialah tatasusunan yang kami takrifkan, mengandungi semua data yang perlu dipaparkan.

3. Kemas kini segerak data jadual

Apabila kami mengubah suai senarai pengguna, halaman tidak akan dikemas kini dengan serta-merta. Untuk mencapai kemas kini segerak, kami boleh menggunakan kaedah jam tangan yang disediakan oleh Vue untuk memantau perubahan data dan mengemas kini halaman secara manual selepas pengubahsuaian data selesai.

1. Tentukan data dalam data

Dalam komponen Vue, kita perlu mentakrifkan objek data yang digunakan untuk menyimpan data jadual.

data() {
  return {
    userList: [
      {name: '张三', age: 25},
      {name: '李四', age: 30},
      {name: '王五', age: 28},
    ]
  }
},

2. Pantau perubahan data

Seterusnya, kita perlu menggunakan kaedah jam tangan yang disediakan oleh Vue untuk memantau perubahan dalam senarai pengguna.

watch: {
  userList: function () {
    this.$nextTick(() => {
      //表格数据更新后，手动更新页面
      this.$forceUpdate();
    });
  },
},

Di sini, kami menggunakan kaedah this.$nextTick() untuk memastikan halaman telah dipaparkan selepas data jadual dikemas kini. Kemudian, panggil kaedah ini secara manual.$forceUpdate() untuk memaksa halaman dipaparkan semula.

3. Ubah suai data

Akhir sekali, kami boleh mengubah suai data dalam userList melalui fungsi yang disediakan oleh Vue. Contohnya:

this.userList[0].age = 26;

Pada masa ini, Vue akan mencetuskan kaedah jam tangan secara automatik dan mengemas kini data jadual dalam halaman.

Ringkasnya, Vue sangat mudah untuk mengemas kini data jadual secara serentak. Anda hanya perlu menggunakan kaedah jam tangan untuk memantau perubahan data dan memanggil kaedah ini secara manual.$forceUpdate() untuk mencapai kemas kini data segerak.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menyegerakkan data pada halaman kemas kini jadual Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!