vue3中watch侦听器上

<template>

<div>

<h1>{{p1}}</h1>

<br>

<h1>{{p2}}</h1>

<br>

<h1>监听一个对象数据变化:{{p3.age.num}}</h1>

<br>

<button @click="p1++">点击P1++</button>

<button @click="p2+=2">点击P2+=2</button>

<button @click="p3.age.num++">点击年龄++</button>

</div>

</template>

<script>

import{ref,watch,reactive}from 'vue'

export default ({

    setup(){

        const p1=ref(0)

        const p2=ref(1)

        const p3=reactive({

            name:'马云',

            age:{

                num:1

            }

        })

        //一。监听一个ref数据变化

        watch(p1,(newVal,oldVal)=>{

            console.log(newVal,oldVal)

        })

        //二。监听多个ref数据变化

        watch([p1,p2],(newVal,oldVal)=>{

            console.log(newVal,oldVal)

        })

        //三。监听整个reactive响应式数据变化，只能监听到最新的结果

        watch(p3,(newVal,oldVal)=>{

            console.log(newVal,oldVal)

        })

        //四：监听reactive响应式数据中某一个数据的变化

        watch(()=>p3.age.num,(newVal,oldVal)=>{

            console.log(newVal,oldVal)

        })

       

       

        return{p1,p2,p3}

    },

})

</script>