Comment résoudre l'avertissement « Éviter les accessoires de mutation » dans Vue 2 ?

Avertissement « Éviter les accessoires en mutation » dans Vue 2

Lors de l'exploration de la leçon « Vue, Laravel et AJAX » dans « Apprentissage de Vue étape par étape » série, les apprenants rencontrent souvent un avertissement :

vue.js:2574 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "list" (found in component )

Cause de l'avertissement

L'avertissement se produit lorsque le code dans le hook de cycle de vie créé() tente de modifier le accessoire de liste. Dans Vue 2, les accessoires sont immuables, ce qui signifie que leurs valeurs ne peuvent pas être directement modifiées. L'écrasement d'un accessoire par une valeur mutée déclenche l'avertissement.

Solution

Pour éviter cet avertissement, nous devons créer une donnée ou une propriété calculée qui dépend de la valeur initiale de la liste prop. Vue.js mettra ensuite à jour cette propriété de manière réactive lorsque l'état du composant parent change, garantissant ainsi que le comportement du composant reste cohérent.

Refactoring du code

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list), // Create data property based on prop
        }
    }
});

Dans ce Dans ce cas, nous créons une propriété de données mutableList à partir de la prop list, qui sera utilisée pour stocker toutes les modifications locales.

Notes supplémentaires

• Il est important d'éviter utiliser le même nom pour les accessoires et les propriétés des données afin d'éviter toute confusion.
• Comprendre les accessoires et la réactivité dans Vue.js est essentiel pour maintenir la maintenabilité du code. Reportez-vous au guide officiel Vue.js pour plus de détails.

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!