个人中心
gpt4 book ai didi

vue项目watch内的函数重复触发问题的解决

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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() 。

?
1
2
3
4
5
6
7
watch: {
         someValue(newValue, oldValue) {
             if ( this .$route.fullPath === 'A页面路由路径' ) {
                 // do something
             }
         }
     }

解决方法2

添加一个flag参数来判断页面是否是active状态，使用keep-alive缓存的组件只会触发activated和deactivated事件，所以就在这两个事件触发时把flag置为true和false，只有在flag为true的时候才执行getList() 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
   data () {
     return {
       activatedFlag: false
     };
   },
   watch: {
     'someValue' (val) {
       if (val && this .activatedFlag) {
         this .getlist();
       }
     }
   },
   activated () {
     this .activatedFlag = true ;
   },
   deactivated () {
     this .activatedFlag = false ;
   }
}

如果页面比较多，而且各页面里的函数名称不一致的话，可以把上面代码的watch部分去掉写成一个mixin，在需要的页面引入即可 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
import activeFlag from "@/mixin/activeFlag" ;
 
export default {
   mixins: [activeFlag],
   watch: {
       'someValue' (val) {
         if (val && this .activatedFlag) {
           this .getlistA();
           this .getlistB();
         }
       }
     },
}

以上就是vue项目watch内的函数重复触发问题的两种解决方案的详细内容，更多关于vue watch函数重复触发解决的资料请关注我其它相关文章！ 。

原文链接：https://liyangzone.com/ 。

最后此篇关于vue项目watch内的函数重复触发问题的解决的文章就讲到这里了,如果你想了解更多关于vue项目watch内的函数重复触发问题的解决的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Linux利用Sysctl命令调整内核参数
文章推荐： vue监听路由变化时watch方法会执行多次的原因及解决
文章推荐： Vue 如何追踪数据变化
文章推荐： vue3.0公共组件自动导入的方法实例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com