Erreur Vue : la fonction hook de cycle de vie ne peut pas être utilisée correctement, comment la résoudre ?

Erreur Vue : La fonction hook de cycle de vie ne peut pas être utilisée correctement, comment la résoudre ?

Lors du développement d'applications à l'aide de Vue, nous rencontrons souvent l'utilisation de fonctions de hook de cycle de vie. Les fonctions de hook de cycle de vie nous permettent d'exécuter certaines logiques au cours des différentes étapes du cycle de vie d'un composant. Cependant, nous pouvons parfois rencontrer un problème : la fonction hook de cycle de vie ne peut pas être utilisée correctement, ce qui entraîne une erreur.

Ce type d'erreur apparaît généralement sous la forme d'un message d'erreur similaire au suivant dans la console :
"TypeError : Impossible de lire la propriété 'xxx' de undefined"

Habituellement, cela est dû au fait que la fonction hook de cycle de vie n'est pas correctement liée lorsque en l'utilisant. Causé par la détermination de ce point. Ci-dessous, nous utiliserons un exemple de code pour démontrer ce problème et sa solution.

L'exemple de code est le suivant :

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    setTimeout(function() {
      this.message = 'Updated Vue!' // 报错的地方
    }, 1000);
  }
}
</script>

Dans l'exemple de code ci-dessus, nous avons modifié la propriété created钩子函数中使用了一个定时器，该定时器会在1秒后将message en « Vue mise à jour ! ». Cependant, lorsque nous exécutons le code, un message d'erreur similaire à celui ci-dessus apparaîtra.

La raison de ce problème est que dans la fonction de rappel du minuteur, le pointeur this a changé. Dans une instance Vue, ceci à l'intérieur de la fonction hook du cycle de vie pointe vers l'instance Vue elle-même, tandis que dans une fonction normale, cela pointe vers la portée de la fonction. Par conséquent, lorsque nous utilisons this.message dans la fonction de rappel du timer, cela ne pointe pas vers l'instance Vue, donc une erreur sera signalée.

La solution est d'utiliser les fonctions fléchées ou de stocker ceci dans une variable pour résoudre le problème signalé par ceci. Voici un exemple de code de la solution :

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    // 使用箭头函数
    setTimeout(() => {
      this.message = 'Updated Vue!' // 这里不会报错
    }, 1000);

    // 或者使用变量保存this
    var self = this;
    setTimeout(function() {
      self.message = 'Updated Vue!'
    }, 1000);
  }
}
</script>

Dans l'exemple de code ci-dessus, nous nous assurons que ceci à l'intérieur de la fonction de rappel du timer pointe vers l'instance de Vue en utilisant une fonction fléchée ou en l'enregistrant dans la variable self.

En utilisant correctement la fonction flèche ou en l'enregistrant dans une variable, nous pouvons résoudre le problème d'erreur causé par l'incapacité d'utiliser correctement la fonction hook de cycle de vie. Espérons que cet exemple de code vous aidera à résoudre un problème similaire. N'oubliez pas qu'il est très important de comprendre et d'utiliser correctement les fonctions de hook de cycle de vie dans le développement de Vue.

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!