【Vue】2-6、侦听器_vue2.6 from添加监听-CSDN博客

本文详细介绍了Vue.js中watch侦听器的使用，包括其语法、如何监听数据变化、immediate和deep选项的作用，并通过示例展示了如何在Vue实例中设置和使用watch侦听器来实现数据驱动的行为。

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

watch 侦听器

watch 侦听器允许开发者监听数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

const vm = new Vuew({
	el: '#app',
	data: { username: ''},
	watch: {
		username(newVal,oldVal){
			console.log(newVal,oldVal);
		}
	}
})

<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <!-- 导入 Vue 的库文件 -->
    <script src="./lib/vue.js"></script>
    <!-- Jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 创建 Vue 的实例对象 -->
    <script>
        /**
        const vm = new Vue({
            // el 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                username: ''
            },
            watch: {
                username(newVal){
                    if(newVal != ''){
                        $.get('https://www.escook.cn/api/finduser/' + newVal,function(res){
                            console.log(res)
                        })
                    }
                }
            }
        })
        
       const vm = new Vue({
            // el 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                username: 'Jack'
            },
            watch: {
                username: {
                    // 侦听器的处理函数
                    handler(newVal){ 
                        if(newVal != ''){
                            $.get('https://www.escook.cn/api/finduser/' + newVal,function(res){
                                console.log(res)
                            })
                        }
                    },
                    immediate: true
                }
            }
        })
        */
       const vm = new Vue({
            // el 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                info:{
                    username: 'Jack'
                }
            },
            watch: {
                /**
                info:{
                    handler(newVal){
                        console.log(newVal);
                    },
                    deep: true
                }
                */
                // 侦听对象属性的变化
                'info.username'(newVal){
                    console.log(newVal)
                }
            }
        })
    </script>
</body>

注意：

以上形式是把侦听器定义为一个函数，所以在页面刚进来的时候是不会调用的，只有在侦听器侦听的对象数据发生变化了才会调用侦听器，并执行相应操作。

而且通过此方法定义的侦听器无法侦听对象的属性的变化。

通过 immediate 选项让页面刚加载时便调用侦听器。

通过 deep 选项让侦听器深度侦听对象中每个属性的变化。