三、监听属性

import {watch, watchEffect} from "vue"

1、watch 监听属性

let message = ref({

        foo:{

            bar:{

                name:'aaa'

            }

        }

    })

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

        console.log(newVal,oldVal)

    },{

        deep:true //深度监听

    })

    // 监听单一值

    watch(()=>message.foo.bar.name,(newVal,oldVal)=>{

        console.log(newVal,oldVal)

    },{

        deep:true // 深度监听

        immediate:true // 立即执行一次

        flush:'pre' // 默认值 pre 组件更新之前调用、sync同步执行、 post 组件更新后执行

    })

2、watchEffect 高级监听属性

// 进入页面就执行一次

    watchEffect((oninvalidate)=>{

        // 执行顺序 1、2、3

        console.log('2')

        console.log('3')

        oninvalidate(()=>{

            console.log( '1 这是回调函数，watchEffect会优先执行回调函数可以做防抖' )

        })

    },{

        flush:'pre' // 默认值 pre 组件更新之前调用、sync同步执行、 post 组件更新后执行

        onTrigger(e){

            // 开发调试函数

            debugger

        }

    })