如何判断Vue组件是否处于活动状态
我有一个包装在<keep-alive>标记中的Vue组件，以防止重新呈现。
在组件中，我希望通过触发一个方法来对全局数据中的某些更改做出反应。但是，我只想在组件当前处于活动状态时触发该方法。
现在，我正在做这样的事情：
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();
}
},
},
}我在the documentation for the tag里找不到这样的东西。而且，看看Vue实例，它似乎没有对应的属性。但是，有没有人知道有一种方法可以让我获得Vue实例的“激活”状态，而不必自己通过钩子来维护它？
回答 3
Stack Overflow用户
发布于 2018-05-12 06:44:59
也许你可以使用_inactive (基于the source code at 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>
Stack Overflow用户
发布于 2018-05-12 06:13:45
查看source code，看起来组件实例中的任何状态都没有改变。相反，只需在缓存中添加或删除元素。所以，我不认为除了生命周期钩子之外没有其他选择。
Stack Overflow用户
发布于 2021-08-14 13:42:15
使用Vue 3组合API，您可以使用onDeactivated在组件中设置inactive标志属性
https://v3.vuejs.org/api/options-lifecycle-hooks.html#deactivated
https://stackoverflow.com/questions/50295985
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号