侦听器主要使用watch关键字

一、基础使用

使用下述代码替换app.vue中的代码

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

// 声明一个原始消息内容
const msg = ref("原始消息")

// 创建一个修改原始数据的方法
function updateData(){
    msg.value = "修改后的消息"
}

// 侦听消息变量, 当值发生变化时：1）控制台打印旧的值和新的值，2）在此对变量进行赋值
watch(msg, (newValue, oldValue)=> {
    console.error(oldValue, newValue)
    msg.value = '你通过点击按钮修改了原始的消息'
})
</script>

<template>
    <button @click="updateData">修改数据</button>
    <p>数据：{{msg}}</p>
</template>

二、立即执行

默认情况下watch是当数据发生变化时才会执行回调， 但是在某些场景中， 我们可能会希望在创建侦听器的时候就立刻先执行一遍回调。 此时可以使用immediate: true选项来强制侦听器的回调立即执行一次。语法如下：

watch(source, (newValue, oldValue) => {
  // 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })