Vue2 监听器
概述#
watch 监听器允许开发者动态监视数据的变化，从而针对数据的变化做出特定的操作。
通俗的来理解可以理解为设定了一个函数，当指定的数据发生变化之后，vue 就会帮我们自动去触发这个函数，这就是 watch 监听器。
在 watch 监听器中，函数可以接收两个参数 newVal、oldVal。这两个参数分别记录了变化的新值和变化之前的旧值。
const vm = new Vue({
el: '#app',
data: { username:'' },
watch: {
username(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
})
vm.$watch('username', {
handler(newValue, oldValue) {
console.log(newVal, oldVal)
}
})
立即调用 immediate 选项#
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：
const vm = new Vue({
el: '#app',
data: { username:'' },
watch: {
username: {
// handler 固定写法，表示 username 发生变化时，自动调用 handler 处理函数
handler: function(newVal) {
console.log(newVal)
},
// 表示页面初次渲染好之后，就立即触发当前的 watch 监听器
immediate: true
}
}
})
监听对象 deep 选项#
如果 watch 监听的是一个对象，那么对象的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项。
const vm = new Vue({
el: '#app',
data: {
info: { username: 'brokyz' }
},
watch: {
info: {
// handler 固定写法，表示 username 发生变化时，自动调用 handler 处理函数
handler: function(newVal) {
console.log(newVal.username)
},
// 监听一个对象时，如果要监视内部属性变化需要加deep参数为true
deep: true
}
}
})
监听对象的单个属性变化#
如果只想要监听对象中单个属性的变化，可以按照如下形式：
const vm = new Vue({
el: '#app',
data: {
info: { username: 'brokyz' }
},
watch: {
'info.username': {
handler(newVal) {
console.log(newVal)
}
}
}
})
针对与watch与computed的延时返回问题#
computed#
<body>
<div id="app">
<p>firstname: {{firstname}}, lastname: {{lastname}}.</p>
<p>fullname: {{fullname}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/gh/brokyz/cdn/vue/vue-2.7.10.js"></script>
<script>
const vm = new Vue({
data: {
firstname: "zhang",
lastname: "boqiang",
},
computed: {
fullname() {
setTimeout(() => {
console.log("计时器被调用");
return this.firstname + "-" + this.lastname;
}, 1000);
},
},
}).$mount("#app");
</script>
- 在计算属性中，由于return在定时器中，所以这个return是定时器的return。因此计算属性并没有进行return。所以fullname并没有值。
- 如果想要定时器延迟输出则需要使用watch。
watch#
<body>
<div id="app">
<p>firstname: {{firstname}}, lastname: {{lastname}}.</p>
<p>fullname: {{fullname}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/gh/brokyz/cdn/vue/vue-2.7.10.js"></script>
<script>
const vm = new Vue({
data: {
firstname: "zhang",
lastname: "boqiang",
fullname: "zhang-booqiang",
},
watch: {
firstname(newV) {
setTimeout(function () {
this.fullname = newV + "-" + this.lastname;
}, 2000);
},
lastname(newV) {
setTimeout(() => {
this.fullname = this.firstname + "-" + newV;
}, 2000);
},
},
}).$mount("#app");
- 如果延时输出那么定时器一定要使用箭头函数，因为箭头函数中的this，指向的是外层的vue实例，可以通过this访问到vue实例的属性。如果不使用箭头函数，那么this指向的就是windows对象。
注意：computed能完成的操作，watch都能够完成。但是watch能完成的工作，computed不一定能完成。比如异步操作。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南