Как определить, активен ли компонент Vue или нет

Question

У меня есть компонент Vue, который обернут в тег <keep-alive> для предотвращения повторного рендеринга.

Внутри компонента я хочу реагировать на некоторые изменения в глобальных данных с помощью метода. Но я хочу запустить метод только в том случае, если компонент в данный момент активен.

Прямо сейчас я делаю что-то вроде этого:

export default {
  data() {
    return { 
      globalVar: this.$store.state.var,
      isComponentActive: false,
    };
  },
  methods: {
    foo() { console.log('foo') };
  },
  watch: {
    globalVar() {
      if (this.isComponentActive) {
        this.foo();
      }
    },
  },
  activated() {
    this.isComponentActive = true;
  },
  deactivated() {
    this.isComponentActive = false;
  },
}

Но я надеялся, что уже есть свойство экземпляра компонента, на которое я мог бы сослаться. Примерно так:

export default {
  data() {
    return { globalVar: this.$store.state.var };
  },
  methods: {
    foo() { console.log('foo') };
  },
  watch: {
    globalVar() {
      if (this.$isComponentActive) {
        this.foo();
      }
    },
  },
}

Я не могу найти ничего подобного в документации по тегу <keep-alive> . И, глядя на экземпляр Vue, у него, похоже, нет свойства для него. Но кто-нибудь знает, как я могу получить «активированное» состояние экземпляра Vue, не поддерживая его самостоятельно через хуки?

Answer 1

Возможно, вы можете использовать _inactive (на основе исходного кода в vue / src / core / instance / lifecycle.js ) чтобы проверить, активирован компонент или нет.

Vue.config.productionTip = false
Vue.component('child', {
  template: '<div>{{item}}</div>',
  props: ['item'],
  activated: function(){
    console.log('activated', this._inactive, this.item)
  },
  deactivated: function(){
    console.log('deactivated', this._inactive, this.item)
  },
  mounted: function(){
    console.log('mounted', this._inactive, this.item)
  },
  destroyed: function () {
    console.log('destroyed', this._inactive, this.item)
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      testArray: ['a', 'b', 'c']
    }
  },
  methods:{
    pushItem: function() {
      this.testArray.push('z')
    },
    popItem: function() {
      this.testArray.pop()
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <button v-on:click="pushItem()">Push Item</button>
  <button v-on:click="popItem()">Pop Item</button>
  <div v-for="(item, key) in testArray">
    <keep-alive>
      <child :key="key" :item="item"></child>
    </keep-alive>
  </div>
</div>

Answer 2

Глядя на исходный код , не похоже, что какое-либо состояние изменяется в экземпляре компонента. Скорее, элемент просто добавляется или удаляется из кэша. Так что нет, я не думаю, что есть какой-либо другой вариант, кроме хуков жизненного цикла.