您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关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中侦听器怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。