Vue 구성 요소가 활성 상태인지 확인하는 방법

Vue 구성 요소가 활성 상태인지 확인하는 방법

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();
      }
    },
  },
}

태그 서류에는 그런 게 없어요.그리고 Vue 인스턴스를 보면 해당 속성이 없는 것 같습니다.하지만 후크를 통해 직접 관리할 필요 없이 Vue 인스턴스의 "활성화된" 상태를 얻을 수 있는 방법을 아는 사람이 있습니까?

아마 사용하실 수 있을 겁니다._inactive(vue/src/core/syslog/syslog.syslog의 소스 코드를 기반으로) 컴포넌트가 활성화 되어 있는지 여부를 확인합니다.

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>

소스 코드를 보면 컴포넌트 인스턴스에서 상태가 변경된 것 같지는 않습니다.요소는 단순히 캐시에서 추가 또는 삭제됩니다.그러니까 라이프 사이클 훅 말고는 다른 옵션은 없는 것 같아요.

Vue 3 컴포지션 API를 사용하여inactive구성 요소에서 플래그 속성 사용onDeactivated

https://v3.vuejs.org/api/options-lifecycle-hooks.html#deactivated

언급URL : https://stackoverflow.com/questions/50295985/how-to-tell-if-a-vue-component-is-active-or-not