在keep-alive的页面，Deactivated状态下依然会触发watch操作（vue3）

前言

通常有一些全局的变量，每个页面都有监听，但是我们只希望在当前页面执行监听就好

处理

//记录所有的watch
  const watchList = [];
  function initWatch() {
    let aWatch = watch(
      () => store.state.a,
      (newV) => {
        console.log('watch active')
      },
      {
        deep: true,
      }
    )
    watchList.push(aWatch)
  }

  function destroyWatch() {
    while(watchList.length) {
    //取消当前watch
      watchList.pop()();
    }
  }

  onMounted(initWatch)
  onActivated(initWatch)
  onDeactivated(destroyWatch)

原理

• watch 的返回值是一个StopHandle，直接调用就可以取消当前watch

// 侦听单个来源
function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): StopHandle