vue3.0 watch函数案例

App.vue代码：

<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo'
export default{
  name:'App',
  components:{Demo}
  
}
</script>

Demo代码：

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr>
    <h2>当前的信息为:{{msg}}</h2>
    <button @click="msg+= '!' ">修改信息</button>
    <hr>
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="person.name+='--'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
</template>

<script>
import { ref,reactive,watch } from 'vue'
export default {
    name:'Demo',
    setup(){
        //数据
        let sum = ref(0)
        let msg = ref('你好')
        let person = reactive({
            name:'张三',
            age:23,
            job:{
                j1:{
                    salary:20
                }
            }
        })

        //情况一:监视ref所定义的一个响应式数据
        // watch(sum,(newValue,oldValue)=>{
        //     console.log('sum变了',newValue,oldValue)
        // })

         //情况二:监视ref所定义的多个响应式数据
        // watch([sum,msg],(newValue,oldValue)=>{
        //     console.log('sum或msg变了',newValue,oldValue)
        // })

        /*情况三:监视reactive所定义的一个响应式数据的全部属性
          1.注意:此处无法正确的获取oldValue
          2.注意：强制开启了深度监视（deep配置无效）
        */
        // watch(person,(newValue,oldValue)=>{
        //     console.log('person变化了',newValue,oldValue)
        // },{deep:false}) //此处的deep配置无效

        //情况四:监视reactive所定义的一个响应式数据中的某个属性
        // watch(()=>person.name,(newValue,oldValue)=>{
        //     console.log('person的name变化了',newValue,oldValue)
        // })

        // 情况五:监视reactive所定义的一个响应式数据中的某些属性
        // watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
        //     console.log('person的name或age变化了',newValue,oldValue)
        // })

        //特殊情况
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job变化了',newValue,oldValue)
        },{deep:true})

        //返回一个对象（常用）
        return {
            sum,
            msg,
            person
        }
    }
}
</script>

<style>
/* 


*/
</style>

效果：