Vue3 watchEffect()

watchEffect()函数的作用是接收函数作为参数，并立即执行该函数，当该函数依赖的数据发生变化时，重新运行该函数。

 

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

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

    var num = ref(10)
    watchEffect(() => {
        console.log("watchEffect:" + num.value)
    })
    var btnFn = () => {
        num.value++
    }

</script>