vue 触发watch,vue watch执行两次
本文主要介绍了vue project watch中功能重复触发问题的两种解决方案，帮助大家更好的理解和学习使用vue。感兴趣的朋友可以了解一下。
目录
问题描述：解决方案1解决方案2
问题描述：
有两个页面A和B，每个页面都有一个getList()方法。两种方法都需要传递同一个参数C，参数C的选择过程比较麻烦。为了避免在切换界面A和B时重复选择参数C的问题，我将参数C保存在vuex中，然后使用watch在两个页面中监控参数C来执行getList()方法。然后，发现一个问题。从A页进入B页后，在B页重新选择参数C时会执行A页的getList()方法，反之亦然。将参数C从B页改为A页后，B页的getList()方法也会被执行。
后来发现是因为用了keep-alive才被使用的。keep-alive总是将Vue实例保存在内存中，所以Vue实例总是存在的，对应的watchers总是生效的。搜索相关资料后发现，很多人也遇到了这个问题。最后，找到了以下两种解决方案：
解决方法1
确定是否通过路由器路径执行getList()。
观察：{
someValue(新值，旧值){
如果(这个。$route.fullPath===一个页面路由路径){
//做点什么
}
}
}
解决方法2
添加一个flag参数来判断页面是否活动。使用keep-alive缓存的组件只会触发激活和停用事件，所以在这两个事件被触发时只需将标志设置为true和false，只有当标志为true时才会执行getList()。
{
data () {
返回{
activatedFlag: false
};
},
观察：{
someValue(val) {
if(val this.activatedFlag) {
this . getlist()；
}
}
},
已激活(){
this.activatedFlag=true
},
停用(){
this.activatedFlag=false
}
}
如果页面很多，而且每个页面的函数名称不一致，可以把上面代码的watch部分去掉，写成mixin，然后在需要的页面上介绍。
从“@/mixin/activeFlag”导入active flag；
导出默认值{
mixins: [activeFlag]，
观察：{
someValue(val) {
if(val this.activatedFlag) {
this . get lista()；
this . getlistb()；
}
}
},
}
以上是vue project watch中功能重复触发问题的两种解决方案的细节。更多关于vue手表功能重复触发的解决方案，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。