Pourquoi l'observateur se déclenche-t-il deux fois ?

Question

J'utilise vue-material.io, le datepicker en particulier.

Mais j'ai un problème pendant l'observation de l'état.

L'observateur se déclenche deux fois. S'agit-il d'un bug du paquet ou de la nature de Vue ?

Comment se reproduire :

Essayez de sélectionner une date et voyez la console.

Vous pouvez voir qu'il se déclenche deux fois de manière inattendue.

https://codesandbox.io/s/vue-material-basic-example-hxzwp

Answer 1

Je pense que cela a à voir avec un observateur à l'intérieur du composant. Si vous changez la date en cliquant dessus, il définit les données et les émet. Ensuite, l'observateur interne intervient et modifie également les données en les formatant et émet à nouveau la valeur. De cette façon, l'observateur est déclenché deux fois.

Ce comportement peut sembler étrange mais il est correct.

Si vous voulez, vous pouvez consulter le code source ici : https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDatepicker/MdDatepicker.vue

Answer 2

Vous pouvez comparer l'ancienne et la nouvelle valeur et n'exécuter l'événement que lorsque la valeur change.

  watch: {
    selectedDate(newVal, oldVal) {
      if (!newVal || !oldVal || newVal.getTime() !== oldVal.getTime()) {
        console.log(`this is ${newVal}`);
      }
    }
  }

Answer 3

Vous pouvez simplement vérifier avec :

if (!newVal || `${newVal.getHours()}${newVal.getMinutes()}${newVal.getSeconds()}` === '000') {
    // your code here
    console.log(`this is ${newVal}`);
}