一、WatchEffect的使用

watctchEffect是vue3提供的类似于watch的监视函数。

import {ref,reactive,watchEffect} from 'vue'
export default{
    setup(){
        let sum=ref(0)
        let preson=reactive({
        name:'张三',
        age:18,
        job:{
            teacher:{
                money:180
                }
            }
        })
        watchEffect(()=>{
            const x=sun.value
            const y=person.job.teacher.money
        })
        return{
            sum,
            preson
        }
    }
}

特点：

• 默认开启immediate，一进入页面会执行一次watchEffect函数
• 每当数据x,y有变化时，即sun.value或person.job.teacher.money有变化时，都会执行一次watchEffect函数

二、watchEffect/watch与computed的区别

computed有return返回值，注重的是数据的计算

watchEffect/watch是对数据的监视，注重的是对监视方法的内容执行