在以前使用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   // 深度监听,监听到更深层级值的变化
            }
        }
    })
    
Logo

前往低代码交流专区

更多推荐