Vue3 watch() 监听

watch()​

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数

 

<template>
	<span>
		<p>{{num}}</p>
		<p>{{num2}}</p>
		<button @click="num++">+1</button>
		<button @click="addNum">+1</button>
	</span>
</template>

<script setup>
    import {ref, watch} from "vue"

    var num = ref(10)
    var num2 = ref(20)

    watch(num, (newValue, oldValue) => {
        console.log(newValue, oldValue)
    })

    var addNum = () => {
        num.value++;
        num2.value++;
    }

    watch([num, num2], ([newValue, newValue2], [oldValue, oldValue2]) => {
        console.log(newValue, oldValue)
        console.log(newValue2, oldValue2)
    })

</script>