Comment utiliser watch et watchEffect dans vue3

Tout d'abord, résumons la différence entre les deux :

1 watch est exécuté paresseusement, mais watchEffect ne l'est pas. Quelle que soit la configuration du troisième paramètre de watch, watch est exécuté. pour la première fois dans le composant. Il ne sera pas exécuté lorsque le programme est exécuté, il ne sera exécuté que lorsque les dépendances changeront ultérieurement, et watchEffect sera exécuté immédiatement lorsque le programme sera exécuté ici, puis exécuté en réponse à sa dépendance. changements.

2. Les deux sont utilisés de différentes manières. watch passe généralement deux paramètres. Le premier paramètre indique quel état doit déclencher la réexécution de l'écouteur, et le deuxième paramètre définit la fonction de rappel de l'écouteur. la fonction de rappel peut également accepter deux paramètres, pointant vers les valeurs avant et après le changement d'état, afin que nous puissions voir les changements avant et après l'état, mais ne pouvons pas le voir dans watchEffect, et elle ne peut pas être utilisée dans le premier paramètre comme watch Définir les dépendances plus spécifiquement.

3. Watch ne peut surveiller que les valeurs définies par les données réactives et la référence. Pour surveiller une seule valeur, vous devez transmettre la fonction getter de la valeur correspondante, et watchEffect ne peut pas surveiller les valeurs. ​défini par reactive et ref. , ne peut surveiller que sa valeur spécifique correspondante (cela semble un peu alambiqué, voir le code ci-dessous).

Voici quelques petites expériences basées sur le troisième point ci-dessus :

watch :

1. :

watch:

setup() {
    const state = reactive({ count: 0, attr: { name: "" } });
    watch(state, (post, pre) => {
        console.log(post);
        console.log(pre);
        console.log("watch 执行了");
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

Lorsque l'événement clickEvent est déclenché pour modifier la valeur de state.count, nous pouvons voir les résultats suivants depuis la console, indiquant que watch a répondu à state.count change, mais n'a pas été exécuté initialement.

watchEffect :

setup() {
    const state = reactive({ count: 0, attr: { name: "" } });
    watchEffect(() => {
        console.log("watchEffect 执行了");
        console.log(state);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

Cliquez plusieurs fois sur le bouton pour déclencher l'événement clickEvent. Le résultat de la console est le suivant, indiquant. que watchEffect est le premier composant. Le rappel est exécuté lors de la première exécution, mais ne répondra plus aux changements de state.count par la suite.

Explication watch peut surveiller la valeur définie par reactive, mais watchEffect ne le peut pas.

2. Laissez watch et watchEffect surveiller la valeur définie par la réf.

watch:

setup(){
    const count = ref(0);
    watch(count, (post, pre) => {
        console.log("watch 执行了");
        console.log(post);
        console.log(pre);
    });
    const clickEvent = () => {
        count.value++;
    };
    return { clickEvent };
}

Résultat:

watchEffect:

setup(){
    const count = ref(0);
    watchEffect(() => {
      console.log("watchEffect 执行了");
      console.log(count);
    });
    const clickEvent = () => {
      count.value++;
    };
    return { clickEvent };
}

# 🎜 🎜#Result :

Le résultat est le même que ci-dessus, indiquant que watch peut répondre à la valeur définie par ref, mais watchEffect ne le peut pas.

2. Laissez watch et watchEffect répondre aux changements dans une seule valeur :

watch :

setup(){
    const state = reactive({ count: 0 });
    watch(state.count, (post, pre) => {
        console.log("watch 执行了");
        console.log(post);
        console.log(pre);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

Le résultat montre que peu importe la façon dont le clickEvent l'événement est déclenché, la valeur dans watch Aucune des fonctions de rappel ne se déclenche et rien n'est imprimé sur la console.

watchEffect :

setup(){
    const state = reactive({ count: 0 });
    watchEffect(() => {
        console.log("watchEffect 执行了");
        console.log(state.count);
    });
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

Résultat console :

Description watchEffect peut répondre à une seule valeur , mais watch ne le peut pas. Si vous souhaitez que watch réponde aux changements de nombre, vous devez transmettre la fonction getter comme premier paramètre, comme suit :

setup(){
    const state = reactive({ count: 0 });
    watch(
        () => state.count,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

Si la fonction getter renvoie la valeur de référence d'état. , et lors du changement d'état, .count ne modifiera pas la valeur de référence de state, il ne répondra donc pas aux changements dans state.count. Si vous souhaitez répondre, vous devez transmettre la troisième configuration de paramètre {deep:true}, et les valeurs de post et pre dans le code sont les mêmes, comme suit :

setup(){
    const state = reactive({ count: 0 });
    //不会响应变化
    watch(
        () => state,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

setup(){
    const state = reactive({ count: 0 });
    //加上了 {deep:true} 可以响应变化
    watch(
        () => state,
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        },
        {deep:true}
    );
    const clickEvent = () => {
        state.count++;
    };
    return { clickEvent };
}

Si une valeur de référence est renvoyée et que vous devez comparer les différentes valeurs avant et après le changement, vous devez passer la fonction getter pour renvoyer la valeur après la copie complète de l'objet, comme dans l'exemple suivant, renvoie un tableau :

setup(){
    const state = reactive({ count: 0 });
    const numbers = reactive([0, 1, 2, 3]);
    watch(
        () => [...numbers],
        (post, pre) => {
            console.log("watch 执行了");
            console.log(post);
            console.log(pre);
        }
    );
    const clickEvent = () => {
        numbers.push(1);
    };
    return { clickEvent };
}

Résultat de la console :

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!