vue项目watch内的函数重复触发问题的解决
问题描述：
有两个页面A和B，每个页面里都有一个getList()方法。这个两个方法都需要传一个相同的参数C，参数C的选择过程又比较麻烦。为了避免在切换A、B两个界面重复选择参数C的问题，我将参数C存入vuex中，然后在两个页面里都使用watch监听参数C来执行getList()方法。然后发现一个问题，从A页面进入B页面后，在B页面重新选择参数C，A页面的getList()方法竟然也会被执行，反之亦然，从B页面到A页面后，在A页面改变参数C也会执行B页面的getList()方法。
后来发现是使用了因为使用了keep-alive所致，keep-alive会将Vue实例始终保持在内存中，因此该Vue实例始终存续，相应的watchers始终生效，查找相关资料后，发现许多人也遇到了这个问题，最后找到以下两种解决方案：
解决方法1
通过router路径来判断是否执行getList()
watch: {
someValue(newValue, oldValue) {
if (this.$route.fullPath === 'A页面路由路径') {
// do something
}
}
}
解决方法2
添加一个flag参数来判断页面是否是active状态，使用keep-alive缓存的组件只会触发activated和deactivated事件，所以就在这两个事件触发时把flag置为true和false，只有在flag为true的时候才执行getList()
{
data () {
return {
activatedFlag: false
};
},
watch: {
'someValue'(val) {
if(val && this.activatedFlag) {
this.getlist();
}
}
},
activated () {
this.activatedFlag = true;
},
deactivated () {
this.activatedFlag = false;
}
}
如果页面比较多，而且各页面里的函数名称不一致的话，可以把上面代码的watch部分去掉写成一个mixin，在需要的页面引入即可
import activeFlag from "@/mixin/activeFlag";
export default {
mixins: [activeFlag],
watch: {
'someValue'(val) {
if(val && this.activatedFlag) {
this.getlistA();
this.getlistB();
}
}
},
}
以上就是vue项目watch内的函数重复触发问题的两种解决方案的详细内容，更多关于vue watch函数重复触发解决的资料请关注脚本之家其它相关文章！
相关文章
element-ui中table组件的toggleRowSelection()方法使用
这篇文章主要介绍了element-ui中table组件的toggleRowSelection()方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,这篇文章主要给大家介绍了关于Vue子组件调用父组件事件的3种方法,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue.delete()删除对象的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
众所周知Element-UI有换肤功能,下面这篇文章主要给大家介绍了关于Vue+ElementUI实现动态更换任意主题色(动态换肤)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue.js模版插值的原理与实现方法,结合实例形式简单分析了vue.js模板插值的基本功能、原理、实现方法与注意事项,需要的朋友可以参考下2023-04-04
Vue.js 的计算属性和侦听器详解(提升数据处理与交互的关键工具)
在Vue.js开发中,计算属性与侦听器是极为关键的特性,它们极大地提升了数据处理与交互逻辑实现的便捷性和高效性,本文给大家介绍Vue.js 的计算属性和侦听器：提升数据处理与交互的关键工具,感兴趣的朋友一起看看吧2025-04-04
Vue中关闭当前页面的方法与原生JavaScript类似,都是通过window对象的close方法实现,这篇文章主要介绍了Vue关闭当前页面的方法,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了Vue2如何集成Lodop插件实现在线打印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
vue新玩法VueUse工具库具体用法@vueuse/core详解
这篇文章主要介绍了vue新玩法VueUse-工具库@vueuse/core,VueUse不是Vue.use，它是一个基于 Composition API 的实用函数集合，下面是具体的一些用法，需要的朋友可以参考下2022-08-08
本篇文章主要介绍了Vue.js学习笔记之修饰符，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论