vue中watch的高级用法

1.handler方法和immediate属性

假设现在需要监听到sessionId的变化,然后去执行一些逻辑代码.一般写法:

 computed: {
    ...mapGetters([
      'sessionId'
    ])
  },
watch:{
  sessionId(newValue, oldValue){
     if(newValue){
        ........//处理后续逻辑
     }
  }
}

但是 watch 的有一个特点是，最初绑定的时候是不会执行的，要等到 sessionId改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要修改一下我们的 watch 写法，修改过后的 watch 代码如下：

 computed: {
    ...mapGetters([
      'sessionId'
    ])
  },
watch:{
  sessionId:{
      handler(newValue,oldValue){
          if(newValue){ 
              .........//处理后续逻辑
          }
       },
     immediate: true // 立即执行
  }
}

⚠️handler方法:我们给 sessionId 绑定了一个handler方法,之前我们写的watch方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
⚠️immediate属性:immediate:false是默认的,不会在绑定的时候执行,而immediate:true代表如果在 wacth 里声明了sessionId 之后，就会立即先去执行里面的handler方法