Vue3 watch监听属性与多属性监听

toRefs

基本功效和toRef一样，只不过这里使用解构的思想，让原对象内的属性转换为ref对象后各自使用； 如下代码将原obj对象内两个属性foo boo直接转变为ref对象来使用！

<script setup lang="ts">
import {
            
      toRefs,reactive } from vue;
let obj = reactive({
            
     
    foo:1,
    boo:2
})
let {
            
     foo,boo} = toRefs(obj)
const change = ()=>{
            
     
    foo.value++
    boo.value++
}
</script>

还有一个toRaw()方法，它的作用是把响应式对象（如reactive）变回原始对象

watch监听属性

单个watch接收三个属性

1. 参数一：具有响应式的对象，如reactive对象
2. 参数二：关于对象内部属性变化的回调函数，有新旧两个形参
3. 参数三：监听属性控制，deep表示深度监听，immediate表示一启动页面立即开始监听

<script setup lang="ts">
import {
            
      ref, watch, reactive } from vue;
let message = reactive({
            
     
    name: helloworld
})
watch(message, (newVal, oldVal) => {
            
     
    console.log(newVal);
    console.log(oldVal);
}, {
            
     
    deep: true,
    immediate: true
})
</script>

当侦听对象内有多个属性时，参数一可以写成箭头函数的形式显示指定我们要监听的属性名称； 如果不这样做，那就会全部监听

<script>
let message = reactive({
            
     
    name: helloworld,
    name2: none
})
watch(()=>message.name2, (newVal, oldVal) => {
            
     
    console.log(newVal);
})
</script>

watchEffect多属性监听

不同于watch，它采用监听对象和监听方法相结合的形式；

1. watchEffect接收一个函数，有一个参数evt，把该参数写成箭头函数后即可在里面写入监听开始前要执行的代码
2. 剩余空间直接写当某参数变化时做出的监听
3. 把watchEffect设置为一个变量，而后用函数的形式调用它时就会停止监听
4. 还有附加参数，flush表示副作用作用时期（即执行附加参数的时机），有三个： pre 监听更新前执行， sync同时进行， post监听更新后执行 之后只需要在附加参数里写方法即可在对应时间段触发！

onTrigger方法为vue协助开发者测试的

<script setup lang="ts">
import {
            
      ref, watchEffect } from vue;
let msg1 = ref<string>(name)
let msg2 = ref<string>(age)

const wc = watchEffect((evt) => {
            
     
    // 设置监听前要做的事
    evt(() => {
            
     
        console.log(正在执行多属性监听);
    })
    console.log("msg1 is changed:" + msg1.value);
}, {
            
     
    flush: post,
    onTrigger() {
            
     
        debugger
    }
})

const stopWatch = () => wc()    // 停止监听
</script>