【vue3入门】-【15】侦听器

侦听器

我们可以使用watch选项在每次响应式属性发生变化时触发一个函数

<template>
    <h3>侦听器</h3> <!--不可以被监听，是固定的数据-->
    <p>{{ message }}</p> <!--可以被监听，只能监听响应式数据(变化的数据)-->
    <button @click="updateHandle">修改数据</button>
</template>
<script>
export default {
    data() {
        return {
            message: "测试1"
        }
    },
    methods: {
        updateHandle() {
            this.message = "测试2"
        }
    },
    // 监听器
    watch: {
        // 函数名必须与被监听的数据对象保持一致，入参需要两个参数
        // newvalue：改变之后的数据
        // oldvalue：改变之前的数据
        message(newValue, oldValue) {
            // 数据发生变化，自动执行的函数
            console.log(newValue, oldValue);
        }
    }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9