vue3监听watch

---

一、基本类型

//引入watch
import { ref,watch } from 'vue'

export default {
    name: 'Home',
    setup() {
        //定义基本类型数据-响应式
        let name=ref('kimi')
        let age=ref(18)

        //1、监听单个
        //监听单个
        watch(name,(newVal,oldVal)=>{

        },{
            //是否立即触发：false-数据只有在变化才会触发；true-数据在首次加载就会触发
            immediate: true
        })

        //2、监听多个，只要有一个值变化就会触发
        watch([name,age],(newVal,oldVal)=>{
            //oldVal：['kimi', 18]
            //newVal：['sally', 18]
        })

        return {
            name,
            age
        }
    }
}
</script>

二、对象

1、对象的属性

import { reactive,watch } from 'vue'

export default {
    name: 'Home',
    setup() {
        //定义响应式对象
        let user=reactive({
            name: 'kimi',
            age: 18
        })

        //基本类型属性
        watch(()=>user.name,(newVal,oldVal)=>{
        
        })

        return {
            user
        }
    }
}

2、整个对象

• 直接监听整个对象会出现oldVal、newVal值相同的情况

import { reactive,watch } from 'vue'

export default {
    name: 'Home',
    setup() {
        //定义响应式对象
        let user=reactive({
            name: 'kimi',
            age: 18
        })
        
        //oldVal = newVal
        watch(user,(newVal,oldVal)=>{
            
        },{
            //开启深度监听
            deep: true
        })
        
        return {
            user
        }
    }
}

• 利用computed计算属性解决

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

export default {
    name: 'Home',
    setup() {
        //定义响应式对象
        let user=reactive({
            name: 'kimi',
            age: 18
        })

        //定义一个新对象newUser，值是深拷贝的User
        let newUser = computed(()=>{
            return {...user}
        })

        //监听newUser
        watch(newUser,(newVal,oldVal)=>{
            
        },{
            //开启深度监听
            deep: true
        })

        return {
            user,
            newUser
        }
    }
}