Bagaimanakah Vue secara automatik meminta data latar belakang dan memaparkan halaman?

Dengan pengemaskinian berterusan teknologi bahagian hadapan, Vue.js, sebagai rangka kerja MVVM, digunakan secara meluas dalam pembangunan aplikasi web moden. Vue.js membebaskan pembangun daripada operasi DOM yang membosankan melalui pengikatan data dan komponenisasi, menjadikan proses pembangunan lebih cekap dan menyeronokkan. Walau bagaimanapun, apabila aplikasi menjadi lebih kompleks, Vue.js memerlukan pembangun untuk memanggil API secara manual untuk meminta data dari bahagian belakang untuk mengemas kini kandungan pada halaman hujung hadapan, yang menjadikan pembangunan aplikasi menyusahkan dan memakan masa. Dalam artikel ini, kita akan belajar cara menggunakan Vue untuk meminta data latar belakang secara automatik dan menjadikan halaman untuk menjadikan pembangunan lebih cekap dan lebih mudah.

1. Gambaran keseluruhan komponen Vue

Dalam Vue.js, komponen ialah unit asas untuk membina aplikasi, yang membolehkan pembangun membahagikan aplikasi kepada modul bebas yang boleh digunakan semula. Setiap komponen Vue mengandungi templat HTML, objek contoh Vue dan atribut seperti data dan peristiwa. Dalam Vue, komponen boleh disarangkan antara satu sama lain berdasarkan hubungan antara komponen induk dan anak untuk membentuk pepohon komponen untuk melaksanakan fungsi aplikasi yang kompleks.

2. Pemindahan data antara komponen Vue

Dalam Vue, untuk berkongsi data antara komponen yang berbeza, kita perlu menggunakan mekanisme pengikatan data Vue untuk pemindahan data. Terdapat terutamanya kaedah pengikatan data berikut dalam Vue:

1 Props

Props ialah cara untuk menghantar data daripada komponen induk kepada komponen anak, serupa dengan sifat dalam React ( props). Dalam komponen induk, anda boleh menetapkan atribut Props dalam komponen anak sama seperti menetapkan atribut dalam teg HTML Komponen anak boleh terus mengakses data yang diluluskan oleh komponen induk melalui this.props.

2. Peristiwa

Acara ialah cara untuk menghantar data daripada komponen anak kepada komponen induk, serupa dengan panggilan balik dalam React. Dalam komponen anak, peristiwa tersuai boleh dicetuskan melalui kaedah $emit dan data boleh dihantar kepada komponen induk. Dalam komponen induk, anda boleh menggunakan v-on untuk mengikat peristiwa tersuai yang dicetuskan oleh komponen anak sama seperti peristiwa asli yang mengikat dan anda boleh menerima data yang diluluskan oleh komponen anak.

3. Vuex

Vuex ialah kaedah pengurusan keadaan Vue Ia menyediakan repositori keadaan yang unik secara global yang boleh diakses dan diubah suai oleh mana-mana komponen. Dengan menyimpan data yang perlu dikongsi dalam pustaka negeri Vuex, kami boleh berkongsi dan memindahkan data dengan mudah antara komponen yang berbeza.

3. Vue meminta data latar belakang secara automatik

Fungsi cangkuk kitaran hayat dalam Vue ialah ciri penting komponen Vue Ia menyediakan fungsi cangkuk yang berbeza untuk memudahkan pembangun dalam kitaran hayat komponen Vue. Peringkat yang berbeza melakukan operasi yang berbeza. Dalam versi Vue 2.x, fungsi cangkuk kitaran hayat yang biasa digunakan termasuk dicipta, dipasang, dikemas kini, dimusnahkan, dsb. Antaranya, dicipta dan dipasang ialah dua fungsi cangkuk kitaran hayat yang biasa digunakan, yang dilaksanakan selepas komponen dicipta dan diberikan ke halaman masing-masing.

Dalam komponen Vue, kami boleh menggunakan fungsi cangkuk kitaran hayat yang dicipta dan dipasang untuk meminta data latar belakang secara automatik dan mengemas kini kandungan pada halaman hujung hadapan selepas komponen itu dipaparkan ke halaman. Langkah pelaksanaan khusus adalah seperti berikut:

1 Cipta komponen Vue

<template>
  <div>
    <h1>Users List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    async fetchUsers() {
      const response = await fetch('/api/users')
      const data = await response.json()
      this.users = data
    }
  }
}
</script>

Dalam kod di atas, kami mencipta komponen Vue bernama UsersList, yang mengandungi senarai ul untuk paparan Pengguna. senaraikan data yang diminta dari latar belakang. Dalam atribut data komponen, kami mentakrifkan tatasusunan bernama pengguna untuk menyimpan data pengguna yang diminta dari latar belakang. Dalam fungsi cangkuk kitar hayat cipta komponen, kami memanggil kaedah fetchUsers untuk meminta data latar belakang. Dalam kaedah fetchUsers, kami menggunakan gula sintaks async/menunggu untuk meminta data latar belakang secara tidak segerak dan menyimpan hasil dalam atribut data komponen.

2. Mulakan aplikasi Vue

import Vue from 'vue'
import UsersList from './UsersList.vue'

new Vue({
  render: h => h(UsersList)
}).$mount('#app')

Dalam kod di atas, kami memperkenalkan komponen Vue dan UsersList, dan mencipta objek contoh Vue melalui kaedah Vue baharu. Dalam objek contoh Vue, kami menjadikan komponen UsersList ke halaman melalui fungsi render dan melekapkannya pada nod DOM melalui kaedah $mount. Dengan cara ini, selepas memulakan aplikasi Vue, Vue akan secara automatik memanggil fungsi cangkuk kitaran hayat yang dibuat bagi komponen UsersList, meminta data dari latar belakang dan mengemas kini kandungan pada halaman hujung hadapan.

4. Vue menyegarkan halaman secara automatik

Dalam pembangunan aplikasi, kita selalunya perlu melaksanakan fungsi kemas kini halaman automatik, iaitu apabila data latar belakang berubah, bahagian hadapan halaman boleh mengemas kini dan memaparkan data terkini secara automatik. Dalam Vue, kami boleh menggunakan mekanisme data responsif Vue dan protokol WebSocket untuk melaksanakan fungsi mengemas kini halaman secara automatik.

1. Gunakan mekanisme data responsif Vue

Dalam Vue, apabila atribut data komponen berubah, Vue akan memaparkan semula kandungan pada halaman hadapan secara automatik. Oleh itu, kita boleh menyimpan data latar belakang dalam atribut data komponen, dan kerap mengemas kini atribut data komponen melalui pemasa atau kaedah lain untuk mencapai kesan pengemaskinian halaman automatik.

2. Gunakan protokol WebSocket

Protokol WebSocket ialah protokol komunikasi dua hala yang boleh mencapai komunikasi dupleks penuh pada sambungan berterusan yang sama. Dalam aplikasi, kita boleh menggunakan protokol WebSocket untuk melaksanakan fungsi pelayan latar belakang menolak data ke bahagian hadapan. Apabila data latar belakang berubah, pelayan latar belakang boleh menghantar data secara aktif kepada klien bahagian hadapan dan mengemas kini kandungan pada halaman hujung hadapan dalam masa nyata.

5. Ringkasan

Sebagai teknologi penting untuk pembangunan aplikasi web moden, Vue.js mempunyai ciri-ciri pengikatan data dua hala, komponenisasi, pemacu data, dll., menjadikan pembangunan bahagian hadapan. aplikasi lebih cekap dan Keseronokan. Dalam artikel ini, kami mempelajari cara menggunakan komponen Vue dan fungsi cangkuk kitaran hayat untuk meminta data latar belakang secara automatik dan memaparkan halaman hadapan. Pada masa yang sama, kami juga memperkenalkan cara Vue menyegarkan halaman secara automatik, memberikan pembangun lebih banyak pilihan teknikal. Saya harap artikel ini dapat membantu semua orang dan meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci Bagaimanakah Vue secara automatik meminta data latar belakang dan memaparkan halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!