vue3计算属性与监视

学习上：

1.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];
        }
    }))
}

2.watch函数

• 与vue2.x中的配置功能一致

• 两个小坑：

• 监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视（deep配置失效）

• 监视reactive定义的响应式数据中某个属性时：deep配置无效

    //情况一：监视ref所定义的一个响应式数据
     watch(num,(newValue,oldValue)=>{
     // immediate:true
     // deep:true//深度监视
     console.log('sum发生了变化',newValue,oldValue);
     },{immediate:true})

    //情况二：监视ref所定义的多个响应式数据
    watch([num, msg], (newValue, oldValue) => {
       console.log("sum或msg发生了变化", newValue, oldValue);
     });

    //情况三:监视reactive所定义的一个响应式数据的全部属性
    //1.注意：此处无法正确的获取oldValue
    //2.注意：强制开启了深度监视（deep配置无效）
     watch(person,(newValue,oldValue)=>{
     console.log('person发生变化',newValue,oldValue);
     },{deep:false})//此处的deep配置无效

    //情况四：监视reactive所定义的一个响应式数据中的某些属性
    watch(()=>person.name,(newValue,oldValue)=>{
     console.log('person的name发生变化',newValue,oldValue);
     })

    //情况五：监视reactive所定义的一个响应式数据中的某些属性
    watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
    console.log('person的name或age发生了变化',newValue,oldValue);
     })

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

3.watchEffect函数

• watch的套路是：既要指明监视的属性也要指明监视的回调

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性就监视哪个属性

• watchEffect有点像computed:

• 但computed注重的计算出来的值（回调函数的返回值），所以必须写返回值

• 而watchEffect更注重过程（回调函数的函数体）,所以不用写返回值

//watchEffect所指定的回调中用到的数据只要发生变化，就直接重新执行回调
watchEffect(()=>{
const x1=sum.value;
xonst x2=person.age
console.log('watchEffect配置重新回调执行了')
})

生活上：

下周开始早上就要军训了，5点半起床。没想到推迟了一年多，以为不用军训了到最后还要训练，真悲催，不过好像唯一的好处就是不用在太阳底下晒。只希望下周军训不要太严，不然挺不住呀。