Vue3 计算属性，监听属性

计算属性，监听属性

1、计算属性computed：当以来的属性发生变化时，就会触发他更改；若依赖的值不发生改变，则使用缓存中的值。

语法：

import { ref, computed } from 'vue';
let price = ref<number | string>(1);
// 函数写法
let com = computed<string>(() => {
    return '$' + price.value;
});
// 对象写法
let com1 = computed({
    get: () => {
        return price.value;
    },
    set: val => {
        price.value = '$' + val;
    },
});

2、监视属性watch：接收三个参数（第一个参数监视的属性/对象，第二个参数回调函数，第三个参数配置对象）

监视ref

import { ref, watch } from 'vue';
// 监视一个ref属性，newVal、oldVal与监视的值保持一直
let price = ref<number | string>(1);
watch(price, (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
});
// 监视多个ref属性，newVal、oldVal是一个数组
let price = ref<number | string>(1);
let price1 = ref<number | string>(1);
watch([price, price1], (newVal, oldVal) => {
    console.log(newVal);
    console.log(oldVal);
});
//监视一个ref对象
let message = ref({
    nav: {
        bar: {
            name: 'zhangsan',
        },
    },
});
watch(
    message,
    (newVal, oldVal) => {
        console.log(newVal, oldVal);
    },
    {
        immediate: true,// 初始化就开启监视
        deep: true,// 开启深度监视
    }
);

监视reactive

注意：当监听值为proxy对象时，oldValue值将出现异常，此时与newValue相同

import { reactive, watch } from 'vue';
// 监视一个reactive对象，监视reactive对象默认就会开启深度监视
let message = reactive({
    nav: {
        bar: {
            name: 'zhangsan',
        },
    },
});
watch(message, (newVal, oldVal) => {
    console.log(newVal, oldVal);
});
// 监视reactive对象中的某个属性
watch(
    () => message.nav.bar.name,
    (newVal, oldVal) => {
        console.log(newVal, oldVal);
    }
);

3、watchEffect：立即执行传入的函数，同时响应式追踪其依赖，依赖发生改变时立马执行该函数。

1. 清除副作用：就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

   import { watchEffect, ref } from 'vue'
   let message = ref<string>('')
   let message2 = ref<string>('')
    watchEffect((oninvalidate) => {
       //console.log('message', message.value);
       oninvalidate(()=>{
           // 回调函数，先执行这个里面的内容
       })
       console.log('message2', message2.value);
   })
   

2. 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新

   const stop =  watchEffect((oninvalidate) => {
       //console.log('message', message.value);
       oninvalidate(()=>{
    
       })
       console.log('message2', message2.value);
   },{
       flush:"post",//设置为post，可以在watch里获取dom元素
       onTrigger () {
    		//调试debugger
       }
   })
   stop()
   

3. 副作用刷新时机flush

   flush的取值：pre（组件更新前执行）、sync（强制效果始终同步触发）、post（组件更新后执行）