7、Vue3 watch监听器

案例

<template>
    <div>
        num1 == {{num1}}  <button @click="num1++">点击改变num1</button><br>
        obj.num1 == {{obj.num1}}   <button @click="obj.num1++">点击改变obj.num1</button>
    </div>
</template>
<script>
import { ref, reactive, watch } from 'vue'
export default {
    name: 'index5',
    setup(){
        const num1 = ref(1);
        const obj = reactive({
            num1: 2
        })
        // 监听器(num1)
        watch(num1, (nval, oval)=>{
            console.log('nval = '+ nval+ ', oval = '+oval);
        })
        // 监听器(object.num1)
        watch(()=>obj.num1, (nval, oval, clear)=>{
           console.log('obj.nval = '+ nval+ ', obj.oval = '+oval);
           clear(()=>{
               console.log('clear-----');
           })
        })
        return { num1, obj }
    }
}
</script>