vue中的watch监听
在以前使用vue的项目中,也用到过watch监听,因为长时间不用了,导致现在都忘记了。现在突然有了这个需求,重新看了下文档,并整理一下,详情请看官方文档:vue官方文档watch的使用!!!注意,不应该使用箭头函数来定义watcher函数(例如searchQuery:newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用..
·
在以前使用vue的项目中,也用到过watch监听,因为长时间不用了,导致现在都忘记了。现在突然有了这个需求,重新看了下文档,并整理一下,详情请看官方文档:vue官方文档watch的使用
!!!注意,不应该使用箭头函数来定义watcher函数(例如
searchQuery:newValue => this.updateAutocomplete(newValue)
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向Vue实例,this.updateAutocomplete
将是undefined
-
代码示例
// watch能监听 var vue = new Vue({ data:{ a:1, b:[], c:{ d:2, e:"3" } }, methods:{ clickMethod(){ this.c.f=4 // 通过点方法给对象添加属性,这时候watch监听不到变化 this.$set(this.c,"f",4) // 通过$set方法添加属性,watch能监听到变化 } }, watch:{ // 当a的值发生改变时触发 a:function(val,oldVal){ console.log('new:%s,old:%s',val,oldVal) }, // 数组长度发生变化时触发 b:function(val,oldVal){ console.log('new:%s,old:%s',val,oldVal) }, // 对象中的属性值发生变化时触发 c:{ handler: function (val, oldVal) { console.log('new:%s,old:%s',val,oldVal) }, deep: true // 深度监听,监听到更深层级值的变化 } } })
更多推荐
已为社区贡献2条内容
所有评论(0)