Comment utiliser watch dans Vue pour surveiller les modifications dans un tableau

Comment utiliser watch dans Vue pour surveiller les modifications dans les tableaux

Vue est l'un des frameworks les plus utilisés dans le développement front-end. Il offre de nombreux moyens pratiques d'implémenter des fonctions telles que la réactivité des données, le rendu des modèles et la composition des composants. Dans Vue, nous utilisons souvent watch pour surveiller les modifications des données. Cependant, lorsque nous devons surveiller les modifications des tableaux, nous devons prêter attention à certains détails.

Dans Vue, nous pouvons utiliser watch pour surveiller les changements dans une seule propriété ou un seul objet. L'utilisation de base est la suivante :

watch: {
  // 监听对象属性
  obj: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  },
  // 监听单个属性
  prop: function (newVal, oldVal) {
    // ...
  }
}

Si nous voulons surveiller les changements dans un tableau, nous devons faire attention aux points suivants :

1. Utilisez la méthode vm.$watch

Vue fournit la méthode vm.$watch pour surveiller les modifications des données. Cette méthode renvoie une fonction pour annuler la surveillance. La machine virtuelle fait ici référence à l'instance de Vue. Pour les tableaux, nous pouvons utiliser cette méthode pour surveiller les modifications dans le tableau. Son utilisation de base est la suivante :

vm.$watch('arr', function (newVal, oldVal) {
  // ...
}, {
  deep: true
})

L'arr ici est le tableau que nous devons surveiller. newVal et oldVal dans la fonction de rappel du gestionnaire représentent respectivement la nouvelle valeur et l'ancienne valeur surveillées. De plus, comme il est courant que chaque élément du tableau soit un objet, vous devez définir deep sur true pour obtenir une surveillance approfondie.

Il convient de noter que Vue ne détournera pas automatiquement le tableau surveillé à l'aide de la méthode vm.$watch. Par conséquent, nous devons détourner manuellement le tableau pour surveiller les changements dans le tableau.

2. Surveillez chaque élément du tableau

Si nous devons surveiller les changements dans chaque élément du tableau, nous pouvons utiliser les paramètres immédiats et du gestionnaire dans la méthode vm.$watch. Le code est le suivant :

arr.forEach(function (item, index) {
  vm.$watch(
    function () {
      return arr[index];
    },
    {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // ...
      }
    }
  );
});

. immédiat est ici true , ce qui signifie que la fonction de rappel sera exécutée une fois lors de l'écoute. Il convient de noter que le code ci-dessus ne détourne pas l'intégralité du tableau, mais surveille chaque élément individuellement.

3. Utiliser les propriétés calculées

Les propriétés calculées dans Vue peuvent calculer de nouvelles données en fonction des données existantes, nous pouvons donc utiliser les propriétés calculées pour surveiller les changements dans le tableau. Son utilisation de base est la suivante :

computed: {
  // 监听arr数组
  arrWatcher: function () {
    this.arr; // 调用一次arr，以实现依赖收集
    return this.arr;
  }
},
watch: {
  // 监听计算属性
  arrWatcher: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

L'arrWatcher ici est l'attribut calculé que nous avons défini, et la valeur de retour de cet attribut calculé est le tableau surveillé. Surveillez simplement les changements de la propriété calculée sous surveillance. Étant donné que les propriétés calculées collectent automatiquement les dépendances, lorsque le tableau change, les propriétés calculées sont automatiquement mises à jour, déclenchant la fonction de rappel de surveillance.

Lorsque vous utilisez des propriétés calculées pour surveiller les modifications d'un tableau, vous devez faire attention à une chose : si nous devons uniquement surveiller les modifications de la longueur du tableau et ne nous soucions pas des modifications des éléments du tableau, alors nous pouvons simplement utilisez des propriétés calculées pour y parvenir. Mais si vous devez surveiller les modifications des éléments du tableau, vous devez également détourner chaque élément du tableau et vous devez également utiliser la méthode vm.$watch.

Pour résumer, nous pouvons utiliser la méthode vm.$watch, surveiller chaque élément du tableau et utiliser des propriétés calculées pour surveiller les modifications dans le tableau dans Vue. Il est important de noter que lors de l'utilisation de ces méthodes, le tableau doit être détourné pour garantir que Vue puisse surveiller correctement les modifications dans le tableau.

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!