如何判断keep-alive包裹的Vue组件是否处于激活状态（无需手动维护）

Vue 2 确实没有内置像 $isComponentActive 这样直接获取 keep-alive 组件激活状态的实例属性，官方文档里也没提到相关内容。不过我们可以用更优雅的方式实现你想要的效果，不用手动维护那个 isComponentActive 状态变量，下面给你几种可行的方案：

方案一：动态添加/移除全局变量监听 #

核心思路是只在组件激活时才监听全局变量变化，失活时立即移除监听，这样就完全不需要判断组件是否激活——因为监听本身只在激活期间存在。

export default {
  data() {
    return {
      // 用来存储监听实例，方便后续移除
      _globalVarWatcher: null
    };
  },
  methods: {
    foo() {
      console.log('foo');
    }
  },
  activated() {
    // 激活组件时，创建对全局变量的监听
    this._globalVarWatcher = this.$watch(
      // 用函数返回值监听Vuex状态，避免直接引用导致的响应式问题
      () => this.$store.state.var,
      () => {
        this.foo();
      },
      { 
        immediate: false // 可选：设置为true会在监听创建时立即执行一次回调
      }
    );
  },
  deactivated() {
    // 失活组件时，移除监听并清空引用
    if (this._globalVarWatcher) {
      this._globalVarWatcher();
      this._globalVarWatcher = null;
    }
  }
};

方案二：Vuex订阅（针对Vuex全局状态） #

如果你的全局数据是存在Vuex里的，可以直接利用Vuex的subscribe方法，只在组件激活时订阅状态变化，失活时取消订阅：

import { mapState } from 'vuex';

export default {
  computed: {
    // 映射Vuex状态到组件计算属性
    ...mapState(['var'])
  },
  methods: {
    foo() {
      console.log('foo');
    }
  },
  activated() {
    // 激活时订阅Vuex的mutation
    this._storeSubscription = this.$store.subscribe((mutation, state) => {
      // 可以通过mutation.type过滤，只响应特定的状态变更
      if (mutation.type === 'updateVar') {
        this.foo();
      }
    });
  },
  deactivated() {
    // 失活时取消订阅
    if (this._storeSubscription) {
      this._storeSubscription();
      this._storeSubscription = null;
    }
  }
};

方案三：封装混入（Mixin）复用逻辑 #

如果多个keep-alive组件都需要这个功能，可以封装一个混入，把激活/失活时的监听管理逻辑抽离出来，复用在各个组件里：

// 定义全局混入
const ActiveWatchMixin = {
  data() {
    return {
      _activeWatchers: []
    };
  },
  methods: {
    // 自定义方法：仅在组件激活时添加监听
    $watchWhenActive(source, callback, options) {
      const watcher = this.$watch(source, callback, options);
      this._activeWatchers.push(watcher);
      return watcher;
    }
  },
  deactivated() {
    // 失活时批量移除所有监听
    this._activeWatchers.forEach(watcher => watcher());
    this._activeWatchers = [];
  }
};

// 在组件中使用混入
export default {
  mixins: [ActiveWatchMixin],
  computed: {
    globalVar() {
      return this.$store.state.var;
    }
  },
  methods: {
    foo() {
      console.log('foo');
    }
  },
  activated() {
    // 调用混入提供的方法添加监听
    this.$watchWhenActive('globalVar', () => {
      this.foo();
    });
  }
};

这些方案都避免了手动维护isComponentActive变量的麻烦，逻辑更简洁也更可靠，不会出现状态不同步的问题。

内容的提问来源于stack exchange，提问作者thanksd