vue中watch监听对象、锁的概念

data() {
    return {
        name： 'zs',
        info: {
            hobby: '睡觉'
        }
    }
} 
watch: {
    name(val, oldValue) {
        console.log('info', val, oldValue)
    },
    // 监听对象写成对象形式，里面写deep
    info: {
      handler(val, oldValue) {
          // 这里因为监听是对象、对象在内存中会同步改变、所以拿不到老值、打印出两个新值
          console.log('info', val, oldValue)
      },
      //立刻执行handler
      immediate: true,
      // 深度监听、这里不写deep就和监听字符串一样、会导致没效果
      deep: true,
    },
  },

锁的概念

1.有的时候 给按钮做限制解决快速点击多出触发接口、用css的disabled能禁用但是快速点击还是出来多次请求
2.这里就可以用 防抖、v-loding、锁来做限制
3.锁的概念和v-loading差不多、用来防止多次快速点击按钮出现多次请求、区别防抖、锁不用写setrimeout
data() {
    isLocked: false
}
changeBtn() {
    if (this.isLocked) { return }
    this.isLocked = true
    this.$http.get('url', {...}).then((res) => {
       this.isLocked = false
       console.log(res)
    }).finally(() => {
       // 防止服务器崩了导致请求失败 isLocked 一直是true状态出现bug
       this.isLocked = false
    })
             
}