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>