Comment réaliser un push et une mise à jour en temps réel des données dans le développement de la technologie Vue

Comment réaliser le push et la mise à jour des données en temps réel dans le développement de la technologie Vue

Avec le développement continu d'Internet, le push et la mise à jour des données en temps réel sont devenus des besoins importants dans le développement d'applications Web modernes. En tant que framework de développement frontal populaire, Vue fournit également des mécanismes et des outils qui peuvent nous aider à réaliser une transmission et une mise à jour des données en temps réel. Cet article présentera certaines méthodes couramment utilisées et fournira des exemples de code spécifiques pour démontrer leur utilisation.

1. Utilisez le mécanisme réactif de Vue

Le mécanisme réactif de Vue est l'une des fonctionnalités les plus importantes de Vue. En utilisant la liaison de données réactive de Vue dans les composants, nous pouvons facilement suivre les modifications des données et mettre à jour le contenu de la page en temps opportun. Voici un exemple simple :

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: 'Hello, Vue!' }</pre><div class="contentsignin">Copier après la connexion</div></div><p> } ,<br> méthodes : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>updateMessage() { this.message = 'Hello, World!' }</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>

Dans l'exemple ci-dessus, nous avons défini une propriété appelée message dans les données du composant et l'avons liée à la balise in a p. Lorsque vous cliquez sur le bouton, la méthode updateMessage est appelée et la valeur du message est mise à jour en "Hello, World!". Étant donné que les messages sont des données réactives suivies par Vue, le contenu de la page sera automatiquement mis à jour.

2. Utilisez l'attribut watch de Vue

En plus du mécanisme réactif, Vue fournit également l'attribut watch, qui peut être utilisé pour surveiller les modifications des données et effectuer les opérations correspondantes. Nous pouvons utiliser la montre pour surveiller et traiter les données en temps réel. Voici un exemple :

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { message: '' }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>}, <br> watch : {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>message(newValue, oldValue) { console.log(`新值：${newValue}，旧值：${oldValue}`) }</pre><div class="contentsignin">Copier après la connexion</div></div><p>},<br> Mounted() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 模拟异步请求数据 setTimeout(() =&gt; { this.message = '你好，Vue！' }, 2000)</pre><div class="contentsignin">Copier après la connexion</div></div><p>}<br>}<br></script>

Dans l'exemple ci-dessus, nous utilisons watch pour surveiller les modifications du message et imprimer lorsque la valeur du message change. la nouvelle valeur et l'ancienne valeur. Dans le hook de cycle de vie monté du composant, nous utilisons setTimeout pour simuler les données de requête asynchrone et mettre à jour les données dans le message. Lorsque les données sont mises à jour, la montre se déclenche automatiquement et effectue les opérations correspondantes.

3. Utilisez des bibliothèques tierces pour obtenir une transmission de données en temps réel

En plus des deux méthodes ci-dessus, nous pouvons également utiliser certaines bibliothèques tierces spécialisées pour réaliser une transmission de données en temps réel. Par exemple, en utilisant le plug-in Vue-socket.io, nous pouvons réaliser une communication de données bidirectionnelle en temps réel via Websocket.

Tout d'abord, nous devons installer le plug-in Vue-socket.io :

npm install vue-socket.io --save

Ensuite, introduire le plug-in et l'initialiser dans le fichier d'entrée de l'application Vue , comme suit :

importer VueSocketIO depuis 'vue-socket.io'
importer socketio depuis 'socket.io-client'

Vue.use(new VueSocketIO({
debug: true,
connection: socketio('http: //localhost:3000')
}))

Ensuite, utilisez l'instance de socket fournie par le plug-in dans le composant pour écouter les événements du serveur et mettre à jour les données. Voici un exemple :