Vue watch的用法总结

watch的最常见用法：

export default {
  data() {
    return {
      test: 'msg'
    }
  },
  watch: {
    test(news, olds) {
      alert(news + olds)
    }
  }
}

这种是我们在项目中比较常用的写法，能满足我们大部分的需求，但是有些情况单单这种写法就满足不了了

监听对象的改变

如果只是监听对象指针的改变，上面的写法已经可以满足了，但是我们监听对象一般是需要监听对象中所有属性和和子属性变化，这个时候就要用到deep，实现对对象的深度监听

export default {
  data() {
    return {
      test: {
        kkm: 'a'
      }
    }
  },
  watch: {
    test: {
      handler(news, olds) {

      },
      deep: true
    }
  }
}

监听对象中某个值的改变

有时候，我们只需要对对象中的某个属性进行监听，这个时候可以用下面的写法

export default {
  data() {
    return {
      test: {
        kkm: 'a'
      }
    }
  },
  watch: {
    'test.kkm': {
      handler(news, olds) {

      }
    }
  }
}

监听对象改变前执行一次回调

有时候，我们需要被监听的对象在改变前，就执行一次回调函数，这个时候我们可以使用immediate，如下，在开始监听test的同时，会立马执行一次handler函数

export default {
  data() {
    return {
      test: {
        kkm: 'a'
      }
    }
  },
  watch: {
    test: {
      handler(news, olds) {

      },
      immediate: true
    }
  }
}

希望代码中随时创建和移除监听

有时候，在比较复杂的业务逻辑中，我们需要在页面某个操作后开始对某个属性进行监听，或者希望在某个操作之后移除对某个属性的监听，这个时候我们可以使用vue实例的$watch方法，$watch方法返回一个取消监听函数，用来停止触发回调

export default {
  data() {
    return {
      test: 'a',
      unwatch: null
    }
  },
  methods: {
    // 开始监听
    startWatch() {
      this.unwatch = this.$watch('test', (news, olds) => {
        alert(news)
      })
    }
  },
  beforeDestroy() {
    // 移除监听
    this.unwatch && this.unwatch()
  }
}