我有一个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实例的“activated”状态,而不必通过钩子函数自己维护?
directive=ref
指令是一个解决方案。在你的组件中加入ref="test"
与<keep-alive>
,然后通过this.$refs.test ? true : false
检查其活动状态。 - Sphinx$refs
数组仍将维护。除非你指的是父级作用域,但这对我没有帮助,因为我需要防止触发的方法在已停用的组件内,而不在父级中。 - thanksd