vue3でwatchとwatchEffectを使う方法-Vue.js-php.cn

vue3でwatchとwatchEffectを使う方法

王林

リリース： 2023-05-11 12:37:06

転載

1464 人が閲覧しました

最初に 2 つの違いを要約します:

1. watch は遅延実行されますが、watchEffect は実行されません。watch の 3 番目のパラメータの設定に関係なく、watch はコンポーネントが最初に実行されるときに実行されます。実行されません。後で依存関係が変更されたときにのみ実行されます。WatchEffect は、ここでプログラムが実行されるとすぐに実行され、依存関係の変更に応じて実行されます。

2. この 2 つは、異なる方法で使用されます。通常、Watch は 2 つのパラメータを渡します。最初のパラメータは、リスナーの再実行をトリガーする状態を示します。2 番目のパラメータは、リスナーのコールバック関数を定義します。そして、コールバック関数は次のことができます。また、状態の変化の前後の値を指す 2 つのパラメーターも受け入れます。これにより、状態の前後の変化を確認できますが、watchEffect ではそれを見ることができず、最初のパラメーターを次のようにより具体的にすることはできません。依存関係を定義します。

3. Watch は reactive data と ref で定義された値のみを監視できます。単一の値を監視したい場合は、対応する値の getter 関数を渡す必要があります。ただし、watchEffect は、 reactive と ref で定義された値を監視できます。reactive と ref で定義された値のみを監視できます。対応する特定の値を監視できます (少し複雑に感じます。以下のコードを参照してください)。

以下は、上記の 3 番目の点に基づいたいくつかの小さな実験です:

watch:

1. watch と watchEffect で reactive で定義された値を監視します:

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 };
}

ログイン後にコピー

clickEvent イベントがトリガーされて state.count の値が変更されると、コンソールから次の結果が表示されます。これは、watch が state.count の変更に応答したが、応答しなかったことを示しています。最初はそうせずに実装してください。

vue3でwatchとwatchEffectを使う方法

watchEffect:

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

ログイン後にコピー

ボタンを複数回クリックして clickEvent イベントをトリガーします。コンソールの結果は次のようになります。これは、watchEffect がコールバックを実行したときに、watchEffect がコールバックを実行したことを示しています。コンポーネントが初めて実行されました。その後、state.count の変更に応答しなくなります。

vue3でwatchとwatchEffectを使う方法

#説明 watch は reactive で定義された値を監視できますが、watchEffect は監視できません。

2. watch と watchEffect で ref で定義された値を監視します。

#時計:

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

ログイン後にコピー

結果:

vue3でwatchとwatchEffectを使う方法

時計効果:

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

ログイン後にコピー

結果:

vue3でwatchとwatchEffectを使う方法

結果は上記と同じで、watch は ref で定義された値に応答できるが、watchEffect は応答できないことを示しています。

2. watch と watchEffect を 1 つの値の変更に応答させます:

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 };
}

ログイン後にコピー

結果は、clickEvent イベントがどのようにトリガーされたとしても、コールバックはウォッチの関数はトリガーされず、コンソールには何も表示されません。

watchEffect:

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

ログイン後にコピー

コンソール結果:

vue3でwatchとwatchEffectを使う方法

説明 watchEffect は単一の値に応答できますが、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 };
}

ログイン後にコピー

ゲッター関数が状態参照値を返す場合、状態を変更しても状態参照は変更されません。 .count 値なので、state.count の変更には応答しません。応答したい場合は、3 番目のパラメーター設定 {deep:true} を渡す必要があります。同時に、post と pre の値もコード内の要素は次のように同じです。

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 };
}

ログイン後にコピー

参照値が返され、変更の前後で異なる値を比較する必要がある場合は、getter 関数を渡して、オブジェクトのディープコピー後の値。次の例では、配列が返されます:

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 };
}

ログイン後にコピー

台湾の結果を制御:

vue3でwatchとwatchEffectを使う方法