Vue3计算属性和监视属性

计算属性

需要引入computed函数

import { computed} from 'vue'

这里我计算的firstName与laststName加在一起

let person = reactive({
    firstName:"张",
    laststName:"三"
})
person.fullName = computed(()=>{
    return person.firstName + "-" + person.laststName
})

监视属性

同样监视属性也需要引入watch函数

import {watch} from 'vue'

监视ref变量

监视一个变量

let watchVal = ref(12)
// 第一个参数是监视的属性，第二个参数为回调，第三个参数为配置项
watch(watchVal,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
},{immediate:true})

监视多个变量

let watchVal = ref(12)
let watchVal2 = ref(10)
// 第一个参数是监视的属性，第二个参数为回调，第三个参数为配置项
watch([watchVal,watchVal2],(newVal,oldVal)=>{
    console.log(newVal,oldVal)
},{immediate:true})

监视reactive变量

监视reactive定义变量的整体对象，不过要注意的是，监视reactive变量，当对象的其中某个值发生变化的时候，并不能记录oldVal的值，也就是当回调触发的时候newVal与oldVal相同

let person = reactive({
    firstName:"张",
    laststName:"三"
})
watch(person,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
})

监视reactive定义变量的对象的某个属性，要注意的是，第一个参数要写成函数的形式

let person = reactive({
    firstName:"张",
    laststName:"三"
})
watch(()=>person.firstName,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
})

watchEffect

watchEffect可以监视其回调函数中使用的所有属性

import {watchEffect} from 'vue'
watchEffect(()=>{
    let a = watchVal.value
    console.log("watchEffect执行了")
})