Comment exécuter en continu un morceau de code dans vue

Vue.js est un framework JavaScript progressif pour la création d'interfaces utilisateur. Son principal avantage est qu'il peut facilement effectuer une liaison de données bidirectionnelle, un développement de composants et une gestion modulaire. Dans le développement de Vue, nous devons parfois exécuter un code spécifique, tel qu'une exécution planifiée, et ne nous arrêterons pas tant qu'une certaine condition ne sera pas atteinte. Cet article présentera comment implémenter une méthode d'exécution continue d'un morceau de code dans Vue.

1. Utilisez la méthode setInterval

La méthode setInterval() peut exécuter le code spécifié dans l'intervalle de temps spécifié. Dans Vue, nous pouvons utiliser la méthode setInterval() dans le composant pour implémenter l'exécution planifiée du code. Voici un exemple :

export default {
  data () {
    return {
      counter: 0
    };
  },
  mounted () {
    setInterval(() => {
      this.counter++;
    }, 1000);
  }
}

Dans le code ci-dessus, nous définissons d'abord une variable de compteur comme compteur, puis utilisons la méthode setInterval() dans la fonction de hook de cycle montée du composant pour exécuter la fonction anonyme toutes les 1 seconde et définir le compteur pour ajouter 1 à la valeur. De cette façon, le code peut être exécuté de temps en temps.

2. Utilisez la méthode setTimeout

La méthode setTimeout() peut exécuter le code spécifié après l'heure spécifiée, similaire au timer en JavaScript. Dans Vue, nous pouvons utiliser la méthode setTimeout() pour implémenter la fonction d'exécution continue d'un morceau de code. Voici un exemple :

export default {
  data () {
    return {
    };
  },
  methods: {
    execute() {
      console.log('执行代码');
      setTimeout(() => {
        this.execute();
      }, 1000);
    }
  },
  mounted() {
    this.execute();
  }
}

Dans le code ci-dessus, nous déclarons une fonction nommée perform Dans le corps de la fonction, nous utilisons la méthode console.log() pour imprimer les informations du "code d'exécution", et utilisons setTimeout(). méthode pour imprimer les informations du « code d'exécution » en 1 seconde. Continuez à exécuter la fonction d'exécution après quelques minutes. Appelez la fonction d'exécution dans la fonction de hook de cycle montée du composant. De cette manière, la fonction d'exécution de code toutes les secondes peut être réalisée.

3. Utilisez la méthode watch

Dans Vue, vous pouvez également utiliser la méthode watch pour exécuter en continu un morceau de code. La méthode watch peut surveiller les modifications des données et exécuter le code spécifié lorsque les données changent. Voici un exemple :

export default {
  data () {
    return {
      counter: 0
    };
  },
  watch: {
    counter () {
      setTimeout(() => {
        this.counter++;
      }, 1000)
    }
  },
  mounted() {
    this.counter++;
  }
}

Dans le code ci-dessus, nous déclarons une variable nommée counter comme compteur, puis surveillons le changement de compteur dans la montre du composant, et utilisons la méthode setTimeout() pour mettre la valeur du compteur à 1. quand il change, ajoutez 1 après quelques secondes. Dans la fonction crochet de cycle monté du composant, on appelle la valeur du compteur, déclenchant ainsi l'événement d'écoute de la montre.

Résumé

La fonction d'exécution continue d'un morceau de code dans Vue peut être réalisée via la méthode setInterval(), la méthode setTimeout() et la méthode de surveillance des changements. Lorsque vous utilisez ces méthodes, vous devez faire attention s'il y a des fuites de mémoire et d'autres problèmes dans le code pour éviter les exceptions du programme.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!