Vue取消监听

Vue2

正常在vue2中，watch的使用如下

export default {
    data() {
        return {
            obj:{
                num:111
            }
        }
    },
    watch:{
        obj:{
            handler(newV){
                console.log(newV)
            },
            deep:true,
            immediate: true,
        }
    },
}

像这种写法，我们不可以自主的取消watch的监听

想要自主的取消监听，可以调用vm.$watch()方法

语法：

vm.$watch( expOrFn, callback, [options] )

参数：
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
  - {boolean} deep
  - {boolean} immediate
返回值：{Function} unwatch

可以看到，这个函数的功能与配置项watch一致，但是此方法多了个返回值，返回值就是一个取消监听的函数

于是，我们就可以像如下这种方式取消监听

vue

<template>
  <div>
    <button @click="add">add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 11,
    };
  },
  created() {
    const stopWatch = this.$watch("num", (newV) => {
      if (newV > 20) {
        stopWatch();
      }
      console.log(newV)
    });
  },
  methods: {
    add() {
      this.num++;
    },
  },
};
</script>

Vue3

Vue3的watch和watchEffeat都返回一个同样的接口，如下

typescript

interface WatchHandle {
  (): void // 可调用，与 `stop` 相同
  pause: () => void
  resume: () => void
  stop: () => void
}

可以直接返回一个暂停函数，也可以解构一个stop用于暂停

cosnt stop=watch()

cosnt {stop}=watch()

Vue取消监听 ​

Vue2 ​

Vue3 ​

Vue取消监听

Vue2

Vue3