vue3 中的 computed 和 watch 的使用

computed 函数

import { computed , reactive } from 'vue';

setup(){
    const person = reactive({
        firstName : '张'，
        lastName : '三'
    })

    // 计算属性 --- 简写
    const fullName1 = computed(()=>{
        return person.firstName + '-' + person.lastName 
    })

    // 计算属性 ---完整写法
    const fullName2 = computed(()=>{
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.spilt('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

watch函数

注意：两个”坑“

• 监视 reactive 定义的响应式数据时：oldValue 无法正确获取、强制开启了深度监视（deep配置失效）
• 监视reactive 定义的响应式数据中某一个属性时：deep配置有效

情况一：监视 ref 定义的响应式数据

watch( sum , ( newValue , oldValue ) => {
    console.log('sum变化了',newValue,oldValue)
},{ immediate : true })

情况二：监视多个 ref 定义的响应式数据

watch([sum , msg],(newValue , oldValue)=>{
    console.log('sum 或 msg 变化了'，newValue,oldValue); // 这里的 newValue,oldValue 以数组的形式输出  
})

情况三：监视 reactive 定义的响应式数据

• 若 watch 监视得是 reactive 定义的响应式数据，则无法正确获得 oldValue！！！！
• 若 watch监视得是 reactive 定义的响应式数据，则强制开启了深度监视

const person = {
    name:'小明',
    age:18,
    job:{
        salary:1234
    }
}
watch(person,(newValue , oldValue)=>{
    console.log('person 变化了',newValue,oldValue)
},{ immediate : true, deep : false}) // 此处的 deep 配置不再奏效

情况四：监视 reactive 定义的响应式数据中的某一个属性

const person = {
    name:'小明',
    age:18,
    job:{
        salary:1234
    }
}
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person 的 job变化了',newValue,oldValue)
},{immdiate:true,deep:teue})

情况五：监视 reactive 定义的响应式数据中的某些数据

const person = {
    name:'小明',
    age:18,
    job:{
        salary:1234
    }
}
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
    console.log('person 的 job 或 name 变化了', newValue , oldValue)
},{immdiate:true,deep:true})

特殊情况

watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person 的 job 变化了',newValue,oldValue)
},{deep:true}) // 此处由于监视的是 reactive 定义的对象中某一个属性，所以 deep 配置有效