理性探究，掌握解决Vue中watch监听路由导致多次请求问题的有效方法！

前端

2023-09-28 12:10:47

避免 Vue 监听路由导致多次请求的最佳实践

在 Vue 应用程序中，使用 watch 监听路由变化是一种常见做法。然而，这样做可能会导致不必要的重复请求。本文将探讨造成这个问题的原因，并提供几种有效的解决方案。

问题根源：响应式数据绑定

Vue 的响应式数据绑定系统会自动监听数据的变化并更新视图。当使用 watch 监听路由时，每次路由发生变化都会触发 watch 回调，进而引发新的请求。

解决方案

1. 利用路由守卫

路由守卫允许你在路由导航过程中拦截和处理事件。你可以利用路由守卫判断是否需要发起请求，从而避免不必要的调用。

代码示例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // ...
})

router.beforeEach((to, from, next) => {
  // 根据条件判断是否发起请求
  if (to.path === '/about' && from.path === '/') {
    // 发起请求
    // ...
  }

  next()
})

2. 使用 Vuex

Vuex 是一个状态管理工具，它允许你在应用程序中集中管理状态。你可以将路由信息存储在 Vuex 中，并在组件中通过 computed 属性获取。这样，只会在组件首次渲染时发起请求，避免了重复调用。

代码示例：

Vuex Store：

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    route: '/'
  },
  // ...
})

组件：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['route']),
    // ...
  },
  watch: {
    route(newVal, oldVal) {
      // 根据条件判断是否发起请求
      if (newVal === '/about' && oldVal === '/') {
        // 发起请求
        // ...
      }
    }
  }
}

3. 手动控制请求

你还可以手动控制请求，只在需要时发出请求。

代码示例：

export default {
  watch: {
    '$route'(to, from) {
      // 根据条件判断是否发起请求
      if (to.path === '/about' && from.path === '/') {
        // 发起请求
        // ...
      }
    }
  }
}