一，computed函数

与Vue2.x中的computed配置功能一致
写法:

import {computed} from 'vue'
...........
setup(){
    //计算属性--简写(只考虑到计算属性为读取)
    let fullname = computed(()=>{
        return person.firstName + '-' +  person.lastName
    })
    
    //计算属性--完整(计算属性可读可修改)
    let fullname = computed({
        get(){
            return person.firstName + '-' +  person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
        
    })
}

二，watch函数

与Vue2.x中的watch配置功能一致
两个小坑:

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

import {ref,reactive,watch} from 'vue'
...........
setup(){
    let sum = ref(0)
    let msg = ref('你好')
    let person = reactive({
        a:'111',
        f:'222',
        b:{
          c:{
           d:'666'
          }
        }
    })
    //情况1--监视ref定义的响应式数据
    watch(sum,(newValue,oldValue)=>{
        console.log('sum变化了',newValue,oldValue)
    }，{imediate:true})
    
    //情况2--监视多个ref定义的响应式数据
    watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或msg变化了',newValue,oldValue)
    })
    
    //情况3--监视reactive定义的响应式数据
    //若watch监视的是reactive定义的响应式数据，则无法正确获取oldValue
    //如果watch监视的是reactive定义的响应式数据，则强制开启了深度监视
    watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
    }，{deep:false})  //此处的deep配置不再奏效
    
    //情况4--监视reactive定义的响应式数据中的某个属性
    watch(()=>person.a,(newValue,oldValue)=>{
        console.log('person的a变化了',newValue,oldValue)
    }，{imediate:true,deep:true})
    
    //情况5--监视reactive定义的一个响应式数据中的某些属性
    watch([()=>person.a,()=>person.f],(newValue,oldValue)=>{
        console.log('person的a或者f变化了',newValue,oldValue)
    })
    
    //情况6 -- 特殊情况
    watch(()=>person.b,(newValue,oldValue)=>{
        console.log('person的b变化了',newValue,oldValue)
    },{deep:true})  //此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效
}

三,watchEffect函数

watch的套路是：既要指明监视的属性，也要指明监视的回调
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性
watchEffect有点像computed:

1.但computed注重的是计算出来的值(回调函数的返回值)，所以必须要写返回值

2.而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调

import { watEffect } from 'vue'

watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.a
    console.log('watchEffect配置的回调被执行了')
})

Vue3.0中的计算属性与监视

一，computed函数

二，watch函数

三,watchEffect函数