这篇文章将为大家详细讲解有关Vue中侦听器怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
计算
安全
数据库
网络和加速
企业服务
<div id="demo">{{ fullName }}</div>var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar' },
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName },
lastName: function (val) {
this.fullName = this.firstName + ' ' + val } } })这段代码的作用就是监听firstName和fullName，当它们发生变化的时候，就改变fullname的值。
方法格式的侦听器
缺点1：无法在刚进入页面的时候，自动触发！
缺点2：如果侦听的是一个对象，如果属性中的属性发生了变化，不会触发侦听器！
对象格式的侦听器
好处1：可以实现刚进入页面，自动触发!
好处2：可以实现深度监听，也就是监听对象中的属性是否变化！
刚进入页面就触发监听
通过添加immediate选项来实现
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch:{
info:{
handle(newVal){
console.log(newVal)
},
// 实现刚进入页面就触发监听
immediate: true
}
}
})在上述代码中，当username发生变化时我们是不能监听成功的，因为变化的是对象属性的值，因此需要深度监听，添加deep选项即可
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch:{
info:{
handle(newVal){
console.log(newVal)
},
// 实现刚进入页面就触发监听
immediate: true,
// 实现深度监听,只要对象中的任何一个属性变化了，都会触发“对象的侦听”
deep: true
}
}
})上述代码中执行结果是打印info这个对象，我们希望打印的username的值，需要加上newVal.username还是比较麻烦的，我们其实可以直接监听并打印变化子属性的值，只需要在要监听的子属性外面加上一层单引号即可：
const vm = new Vue({
el: '#app',
data: {
info: {
username: 'admin'
}
},
watch:{
'info.username': {
handle(newVal){
console.log(newVal)
}
}
}
})关于“Vue中侦听器怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
