Comment éviter les mutations de prop et résoudre l'erreur « vue-warn » dans Vue 2 ?

Vue 2 : éviter les mutations d'accessoires et l'erreur "vue-warn"

Dans votre application Vue 2, vous avez rencontré l'erreur "vue- warn" erreur : "Évitez de muter directement un accessoire car la valeur sera écrasée à chaque fois que le composant parent sera restitué." Cette erreur provient de la mutation de la valeur d'un accessoire directement dans le hook de cycle de vie créé du composant.

Le problème avec les mutations d'accessoires

Vue 2 impose une séparation stricte entre les accessoires et les données des composants. . Les accessoires sont immuables et ne doivent pas être modifiés directement. Lorsqu'un accessoire est muté, cela peut entraîner des effets secondaires involontaires, tels que :

• Écrasement de la valeur de l'accessoire lors du nouveau rendu du composant parent
• Création de problèmes de référence entre les composants

La solution : utiliser des données ou une propriété calculée

L'approche correcte pour manipuler la valeur d'un accessoire consiste à créer une donnée ou une propriété calculée dérivée de l'accessoire. . De cette façon, vous pouvez garder le prop lui-même immuable tout en ayant toujours accès à une copie modifiable.

Dans votre cas, vous pouvez créer une propriété "mutableList" dans vos données où vous analysez la valeur du prop "list" :

<code class="js">Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list);
        }
    }
});</code>

Remarque 1 : Évitez d'utiliser le même nom pour votre propriété prop et data (par exemple, data: function () { return { list: JSON.parse(this.list) } }).

Note 2 : N'oubliez pas que la réactivité dans Vue dépend des références de propriétés. Par conséquent, il est important de vous assurer que votre propriété de données fait référence à la valeur mise à jour dynamiquement.

En suivant ces bonnes pratiques, vous pouvez éviter les mutations de prop et améliorer la stabilité de votre application Vue 2.

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!