0
点赞
收藏
分享

微信扫一扫

watch监听事件三种写法

杰克逊爱学习 2021-09-24 阅读 50
vueVue
  1. 普通监听
    缺点:当值第一次绑定的时候,不会执行监听函数
<input type="text" v-model="age"/>  
//监听 age值发生变化时触发
watch: {
    age(newAge, oldAge) {
        console.log(newAge)
    }
}
  1. 第二种写法
    只有当值改变的时候 才会执行,如果想在第一次绑定的时候执行此监听函数 则需要 设置immediate为true
<input type="text" v-model="age"/>  
watch: {
    age: {
        handler (newAge, oldAge) {
            console.log(newAge)
        },
        immediate: true
    }
}
  1. 深度监听
    当要监听对象或数组的时候需要添加deep:true 属性
<input type="text" v-model="userName.name" />
data (){
    return {
       userName: {name:'张三'}
    }
},
watch: {
    userName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true
    }
}
举报

相关推荐

0 条评论