this.$watch 侦听器和停止侦听器

最新推荐文章于 2025-04-17 14:36:04 发布

luoluosheng07

最新推荐文章于 2025-04-17 14:36:04 发布

阅读量1.3k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/ljh574649119/article/details/136455026

vue3 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用组件实例的$watch方法创建命令式侦听器，包括设置数据源、回调函数配置（深度侦听、立即触发和更改回调机制），以及如何停止侦听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用组件实例的$watch()方法来命令式地创建一个侦听器；

它还允许你提前停止该侦听器
        语法：this.$watch(data, method, object)
1. data：侦听的数据源，类型为String
        2. method：回调函数，参数一新值，参数二旧值
        3.object：配置
                a. deep：深度侦听
                b. immediate：创建时立即触发
                c. flush: 'post'：更改回调机制（DOM更新后）

<script>
export default {
    data: () => ({
        account: 'Abc', // 账号
        emp: {
            name: 'Jack', // 名字
            salary: 7000 // 薪资
        },
        student: {
            name: 'Annie', // 名字
            age: 18 // 年龄
        }
    }),
    // 声明周期函数：页面成功渲染后
    mounted() {
        // 通过组件的实例调用$watch函数来创建侦听器

        // 语法：this.$watch(data, method, object)
        // 1. data：侦听的数据源，类型为String
        // 2. method：回调函数，参数一新值，参数二旧值
        // 3. object：配置
            //   a. deep：深度侦听
            //   b. immediate：创建时立即触发
            //   c. flush: 'post'：更改回调机制（DOM更新后）
        this.$watch('account', (newData, oldData) => {
            console.log('账号的新旧值：')
            console.log(newData)
            console.log(oldData)
        })

        this.$watch('emp.salary', (newData, oldData) => {
            console.log('薪资的新旧值：')
            console.log(newData)
            console.log(oldData)
        }, { immediate: true })


        this.$watch('student', (newData, oldData) => {
            console.log('学生的新旧值：')
            console.log(newData)
            console.log(oldData)
            console.log(document.getElementById('titleAge').innerHTML)
        }, { deep: true, flush: 'post' })
    }
}
</script>

<template>
    账号：<input type="text" v-model="account">
    <hr>
    薪资：<input type="numner" v-model="emp.salary">
    <hr>
    <h3 id="titleAge">
        学生年龄：<span>{{ student.age }}</span>
    </h3>
    学生年龄：<input type="numner" v-model="student.age">
</template>

停止侦听器,需要自行停止侦听器，这时可以调用$watch() API 返回的函数

<script>
export default {
    data: () => ({
        account: 'Abc', // 账号
        stopAccountWatch: null // 调用该函数，可以停止侦听账号数据源
    }),
    // 声明周期函数：页面成功渲染后
    mounted() {
        this.stopAccountWatch = this.$watch('account', (newData, oldData) => {
            console.log('账号的新旧值：')
            console.log(newData)
            console.log(oldData)
        })
    }
}
</script>

<template>
    账号：<input type="text" v-model="account">

    <button @click="stopAccountWatch">停止侦听账号数据源</button>
</template>