07： vue3 侦听器

<template>
    <p>{{ message }}</p>
    <button @click="updateHandle()">修改数据</button>
</template>

<script>
export default{
    data(){
        return{
            message:"Hello"
        }
    },
    methods:{
        updateHandle(){
            this.message="World"
        }
    },
    //侦听器
    watch:{
        //newValue:变化之后的数据
        //oldValue:变化之前的数据
        //函数名必须与侦听的数据对象名一致
        message(newValue,oldValue){
            //可以加入数据变化后，自动执行的函数
            console.log(newValue,oldValue);
        }

    }
}
</script>