Vue.JS 3：侦听（Watch）

<script setup>
// 1. 导入 watch
import { ref, watch } from 'vue'
const count = ref(0)
const setCount = () => {
    count.value++
}


// watch 侦听单个数据源
// 2. 调用 watch 侦听变化
watch(count, (newValue, oldValue) => {
    console.log(`Count 发生了变化，旧值为「${oldValue}」，新值为「${newValue}」`)
})
</script>


<template>
    <div>
        <button @click="setCount">+{{ count }}</button>
    </div>
</template>

<script setup>
// 1. 导入 watch
import { ref, watch } from 'vue'


// 定义数据初始值
const count = ref(0)
const name = ref('Nephilim')


// 修改方法
const changeCount = () => {
    count.value++
}
const changeName = () => {
    name.value = "值已被修改"
}


// watch 侦听多个数据源
// 2. 调用 watch 侦听变化


watch(
    // 希望侦听的变量
    [count, name],
    (
        // 新值
        [newCount,newName],
        // 旧值
        [oldCount,oldName]
    ) => {
        console.log(
            `「count」或「name」发生了变化，旧值【count:${oldCount}  name:${oldName}】，新值【count:${newCount}  name:${newName}】`,
        )
    }
)
</script>


<template>
    <div>
        <button @click="changeCount">修改「count」 - 当前【{{ count }}】</button>
        <hr/>
        <button @click="changeName">修改「name」 - 当前【{{ name }}】</button>
    </div>
</template>