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缓存的组件只会触发activateddeactivated事件,所以就在这两个事件触发时把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函数重复触发解决的资料请关注我们其它相关文章!

(0)

相关推荐

  • 解决vue watch数据的方法被调用了两次的问题

    背景: 路由结构/video/1.mp4,即/video是父路由,/1.mp4是/video的动态子路由,在/video父路由中会通过url的params获取视频信息,即通过/1.mp4获取对应的视频完整信息,然后通过props传到动态子路由中,然后子路由通过接受到的视频对象,进行展示 问题: 当路由切换时,即当我点击其他视频时,导致动态子路由变化时,我监听了/video父路由的变化并重新根据url的params获取视频对象,并自动通过props传入子路由中,我在子路由中通过watch 视频对象

  • 解决Vue watch里调用方法的坑

    这里是说watch调用methods里方法的时候,页面经常会报找不到方法 这个时候一定要在watch里去输出一下this, 看看this包裹的壳是不是多了好多层,所以找不到方法,虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题. 例如 正常情况下用this.functionname()就可以调用了. 但是在一些情况下(现在本人还没找到原因)在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层,所以使用方法的时候就会变成 this

  • vue 子组件watch监听不到prop的解决

    问题描述 在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件一个默认值(服务端数据还未及时获取),那么,我们就需要实时watch这个prop值,一旦prop值有更新,将立即通知子组件更新. 解决方案 watch: { levelDetail: { immediate: true, // 很重要!!! handler (val) { this.levelPersonal = !val ? {} : val // console.log('ac

  • vue watch监控对象的简单方法示例

    watch的作用:监听vue实例上数据的变动 示例: queryData: { name: '', creator: '', selectedStatus: '', time: [], }, 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 2.数组的watch data() { return { winChip

  • 详解Vue中的watch和computed

    前言 对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in

  • vue3 watch和watchEffect的使用以及有哪些区别

    1.watch侦听器 引入watch import { ref, reactive, watch, toRefs } from 'vue' 对基本数据类型进行监听----- watch特性: 1.具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化,用一个侦听起承载 setup() { const name = ref('leilei') watch(name, (curVal, prevVal) => {

  • vue中watch的用法汇总

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种. 1. 常用用法 <input type="text" v-model="name"/> new Vue({ el: '#app', data: { name: '咸鱼' }, watch: { name(newVal,oldVal) { // ... } } }) 直接写一个监听处理函数,当每次监听到 name 值发生改变时,执行函数.也可以在所监听的数据后面直接加字符串形式的方法

  • Vue中computed和watch有哪些区别

    计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,那么默认会走get方法:函数的返回值就是属性的属性

  • 浅谈vue.watch的触发条件是什么

    很多人习惯用watch,但是却很少有人知道watch的真正触发条件.如果不是对vue原理了如指掌,请谨慎使用watch. 示例1,下面会触发watch 吗? <script> new Vue({ data() { return { city: {id: 1, name: 'Beijing'} } }, watch: { city() { console.log('city changed') } }, created() { this.city = {id: 1, name: 'Beijing

  • 解决vue侦听器watch,调用this时出现undefined的问题

    watch侦听器中,我们要将新的值赋给this.a出错 watch: { value: (newV, oldV) => { this.a = newV; } } 这里报错undefined,这里错误的原因是不能写成箭头函数.写成箭头函数后,this会取上下文,而不是组件里面的this了,正确写法为: watch: { value: function(newV, oldV) { this.a = newV; } } 如下图: 看考链接:https://cn.vuejs.org/v2/api/#wa

  • 浅析vue 函数配置项watch及函数 $watch 源码分享

    Vue双向榜单的原理 大家都知道Vue采用的是MVVM的设计模式,采用数据驱动实现双向绑定,不明白双向绑定原理的需要先补充双向绑定的知识,在watch的处理中将运用到Vue的双向榜单原理,所以再次回顾一下: Vue的数据通过Object.defineProperty设置对象的get和set实现对象属性的获取,vue的data下的数据对应唯一 一个dep对象,dep对象会存储改属性对应的watcher,在获取数据(get)的时候为相关属性添加具有对应处理函数的watcher,在设置属性的时候,触发

随机推荐