Vue2 升级 Vue3：利用 Composition API 监听路由参数的变化

2024-02-08 18:55:31

使用 Composition API 监听 Vue3 中的路由参数变化

随着 Vue.js 3 的日益流行，开发人员纷纷采用 Composition API 来管理响应式状态。与 Vue2 中的生命周期钩子不同，Composition API 允许更灵活和模块化的状态管理。

其中一项关键功能是监听路由参数的变化。在本文中，我们将深入探讨如何使用 Composition API 实现此操作，并解决相关问题，例如内存泄漏和响应性问题。

方法 1：使用 onBeforeUnmount 生命周期钩子

onBeforeUnmount 生命周期钩子会在组件卸载之前调用。我们可以利用它来清除对外部状态（例如路由参数）的任何监听。以下是如何使用 onBeforeUnmount 监听路由参数变化的示例：

import { onBeforeUnmount, getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    const router = instance.appContext.config.globalProperties.$router

    const routeChangeListener = () => {
      // 当路由参数发生变化时执行此函数
    }

    router.addRouteChangeListener(routeChangeListener)

    onBeforeUnmount(() => {
      router.removeRouteChangeListener(routeChangeListener)
    })
  }
}

在 onBeforeUnmount 钩子中，我们使用 removeRouteChangeListener 方法来移除路由监听器。这将防止在组件卸载后发生内存泄漏。

方法 2：使用 provide/inject 模式

provide/inject 模式允许我们在组件之间共享数据和函数。我们可以利用它来创建一个可重用的 Composition API 函数，用于监听路由参数的变化。以下是如何使用 provide/inject 模式监听路由参数变化的示例：

// provide.js
import { provide, inject } from 'vue'

export const useRouteParams = () => {
  const router = inject('router')

  const routeParams = computed(() => router.currentRoute.value.params)

  return routeParams
}

// inject.js
import { provide, inject } from 'vue'

export default {
  setup() {
    const router = inject('router')
    provide('router', router)

    const routeParams = useRouteParams()
  }
}

在 provide.js 中，我们创建了一个 useRouteParams 函数，它通过注入的 router 对象返回一个计算属性，该属性包含当前路由参数。在 inject.js 中，我们通过 provide 选项提供了对 router 的访问，并通过 inject 选项将 router 注入到组件中。然后，我们可以使用 useRouteParams 函数来获取当前路由参数。

响应性注意事项

无论使用哪种方法，重要的是要确保响应性得到正确处理。在 Vue3 中，响应性是由 reactive、ref 和 computed 等 API 管理的。当使用 provide/inject 模式时，还必须注意 reachability 问题。

reachability 是指组件是否可以访问提供给它的数据和函数。如果一个组件不再可达，它将被垃圾回收，并且它所持有的任何响应式数据也将被清除。为了避免 reachability 问题，我们可以在 provide 选项中使用 scope 属性来显式指定组件的可访问范围。

示例：使用 onBeforeUnmount 生命周期钩子

为了更好地理解如何使用 Composition API 监听路由参数的变化，让我们考虑以下示例代码：

import { onBeforeUnmount, getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    const router = instance.appContext.config.globalProperties.$router

    const id = ref(null)

    const routeChangeListener = () => {
      id.value = router.currentRoute.value.params.id
    }

    router.addRouteChangeListener(routeChangeListener)

    onBeforeUnmount(() => {
      router.removeRouteChangeListener(routeChangeListener)
    })

    return {
      id
    }
  }
}