vue3中如何实现多个侦听器(watch)

news2025/11/4 14:57:00

<body>
<div id="app">
    <input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '冰激凌'
            }
        },
        methods: {
            change() {
                this.food.name = '棒棒糖'
            }
        },
        watch: {
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }
    })
</script>
</body>

immediate（立即处理进入页面就触发）
deep（深度监听）

https://cn.vuejs.org/guide/essentials/watchers.html

<script setup lang = "ts">
import { ref, reactive, watch } from 'vue'

const person = reactive({
  name: 'zhangsan',
  age: 18,
  school: {
    address: 'jinan'
  }
})

const updatePerson = () => {
  person.name = 'lisi'
  person.school.address = 'beijing'
}

watch(
  [() => person.name, () => person.school.address],
  (newInfo: string[], oldInfo: string[]) => {
    console.log(newInfo) // ['lisi', 'beijing']
    console.log(oldInfo) // ['zhangsan', 'jinan']
  },
  { deep: false }
)
</script>

<template>
  <h3>{{ person.name }}</h3>
  <h3>{{ person.school.address }}</h3>
  <button @click="updatePerson">修改人员信息</button>
</template>

https://blog.csdn.net/qq_52421092/article/details/131067716

<script>
import { toRefs, watch, reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            money: 100,
            car: {
                rand: "宝马",
            }
        })
    }
    watch(
        [() => state.money, () => state.car],
        (newVal, oldVal) => {
            console.log("变化了", newVal, oldVal)  // newVal新值是一个数组， 值顺序就是侦听的顺序  oldVal一样
        },
        {
            deep: true,
            immediate: false
        }
    )
    return {
        ...toRefs(state)
    }
}
</script>