VUE框架Vue3下使用watchEffect实现监视效果------VUE框架

<template>
    <h1>{
    
    { data.counter1 }}</h1>
    <button @click="data.counter1++">按一下</button>
    <h1>{
    
    { data.counter2 }}</h1>
    <button @click="data.counter2++">按一下</button>
    <h1>{
    
    { data.counter3 }}</h1>
    <button @click="data.counter3++">按一下</button>
</template>

<script>
import {reactive,watchEffect} from "vue";
export default {
    name : 'App',
    setup(){
        let data = reactive({
            counter1 : 1,
            counter2 : 100,
            counter3 : 1000
        });
        // 使用WatchEffect这个组合式函数的API
        // 这也是用来监视的
        // 这个函数中直接跟一个回调函数即可,这个函数监视到数据发生变化就执行
        watchEffect(()=>{
            // 一上来就会执行一次,类似于开启了immediate
            // 监视到或者说,我们用到的属性发生变化就执行回调函数
            const a = data.counter1;
            const b = data.counter2;
            console.log("a"+a);
            console.log("b"+b);
        });
        return {data};
    }
}
</script>

<style>

</style>

<template>

    <h1>{ { data.counter1 }}</h1>

    <button @click="data.counter1++">按一下</button>

    <h1>{ { data.counter2 }}</h1>

    <button @click="data.counter2++">按一下</button>

    <h1>{ { data.counter3 }}</h1>

    <button @click="data.counter3++">按一下</button>

</template>

<script>

import {reactive,watchEffect} from "vue";

export default {

    name : 'App',

    setup(){

        let data = reactive({

            counter1 : 1,

            counter2 : 100,

            counter3 : 1000

        });

        // 使用WatchEffect这个组合式函数的API

        // 这也是用来监视的

        // 这个函数中直接跟一个回调函数即可,这个函数监视到数据发生变化就执行

        watchEffect(()=>{

            // 一上来就会执行一次,类似于开启了immediate

            // 监视到或者说,我们用到的属性发生变化就执行回调函数

            const a = data.counter1;

            const b = data.counter2;

            console.log("a"+a);

            console.log("b"+b);

        });

        return {data};

    }

}

</script>

<style>

</style>