vue中的watch监听

watch的作用

1.watch可以用来监测Vue实例上的数据变动。

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。

2.通过watch监听flag，多用于弹窗出现几秒后消失。

watch:{
    flag(val){
        setTimeout(()=>{
            this.flag=false
        },1000)
    }
}

3.watch监听对象中的值或数组 (深度监听)

watch: {
  selects:{
    deep:true,
    handler:(val)=>{
      console.log(val)
    }
  }
},

4.监听对象中的某个属性

watch:{
    'obj.a'(val){
        console.log(val)
    }
}