探讨在 Vue Router 源码中如何实现路由参数和查询参数的响应式更新，并触发组件的重新渲染。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue Router 的响应式奥秘：路由参数和查询参数的华丽转身

大家好，我是你们的老朋友（或者新朋友，取决于你是不是第一次看我的文章），今天我们来聊聊 Vue Router 源码中一个非常有趣的话题：路由参数和查询参数的响应式更新，以及它们如何像魔法一样触发组件的重新渲染。

先别害怕源码，咱们尽量用大白话，把复杂的东西拆解成一个个小故事。

路由参数和查询参数：傻傻分不清？

在开始深入源码之前，我们先来明确一下路由参数 (route params) 和查询参数 (query params) 的概念。它们都是用来传递信息的，但方式略有不同：

路由参数: 藏在 URL 的路径里，就像 URL 里的 /users/:id 中的 :id。通常用于标识资源或者页面层级。
查询参数: 跟在 URL 后面，以 ? 开头，用 & 分隔，比如 /users?page=2&sort=name。通常用于筛选、排序、分页等。

举个例子：

URL	路由参数 (Params)	查询参数 (Query)
`/product/123`	`{ id: '123' }`	`{}`
`/search?q=vue&page=3`	`{}`	`{ q: 'vue', page: '3' }`
`/blog/article/456?comments=true`	`{ article: '456' }`	`{ comments: 'true' }`

好了，区分了它们，我们就可以开始追踪它们在 Vue Router 源码里的“命运”了。

响应式的基石：`reactive` 和 `watch`

Vue Router 能够实现路由参数和查询参数的响应式更新，离不开 Vue 提供的两个核心 API：reactive 和 watch。

reactive: 让普通 JavaScript 对象变成响应式对象。当对象的属性发生变化时，会触发依赖该属性的组件进行更新。
watch: 监听一个响应式数据源，当数据源发生变化时，执行一个回调函数。

简单来说，Vue Router 会把路由相关的信息（包括 params 和 query）变成响应式对象，然后用 watch 监听这些对象的变化，一旦发生变化，就通知相关的组件进行更新。

源码探秘：`createRoute` 和 `useRoute`

为了简化理解，我们假设一个简化的 Vue Router 源码结构（实际源码要复杂得多）：

// 简化版 Vue Router 源码

import { reactive, computed, watch, ref, getCurrentInstance } from 'vue';

function createRoute(rawRoute) {
  const route = reactive({
    path: rawRoute.path,
    params: rawRoute.params || {},
    query: rawRoute.query || {},
    fullPath: rawRoute.path + (rawRoute.query ? '?' + new URLSearchParams(rawRoute.query).toString() : '')
  });

  return route;
}

function useRouter() {
  const instance = getCurrentInstance();
  if (!instance) {
    throw new Error('useRouter() can only be used inside setup() or functional components.');
  }
  return instance.appContext.config.globalProperties.$router;
}

function useRoute() {
  const instance = getCurrentInstance();
  if (!instance) {
    throw new Error('useRoute() can only be used inside setup() or functional components.');
  }
  return instance.appContext.config.globalProperties.$route;
}

export { createRoute, useRouter, useRoute };

在这个简化的版本中：

createRoute 函数负责创建路由对象，并将 params 和 query 用 reactive 包裹，使它们变成响应式对象。
useRoute 函数允许组件访问当前的路由对象（$route）。

让我们来分析一下关键的部分：

createRoute 函数:

function createRoute(rawRoute) {
  const route = reactive({
    path: rawRoute.path,
    params: rawRoute.params || {},
    query: rawRoute.query || {},
    fullPath: rawRoute.path + (rawRoute.query ? '?' + new URLSearchParams(rawRoute.query).toString() : '')
  });

  return route;
}

这里 reactive 的作用至关重要。它使得 route.params 和 route.query 变成响应式对象。这意味着，只要它们的值发生改变，Vue 就能检测到，并通知相关的组件进行更新。

useRoute 函数:

function useRoute() {
  const instance = getCurrentInstance();
  if (!instance) {
    throw new Error('useRoute() can only be used inside setup() or functional components.');
  }
  return instance.appContext.config.globalProperties.$route;
}

useRoute 实际上返回的是全局的 $route 对象，这个对象包含了当前的路由信息，包括 params 和 query。组件通过 useRoute 访问这个对象，从而能够读取和响应路由的变化。

组件中的响应式使用：`useRoute` 的威力

现在，让我们看看在组件中如何使用 useRoute 来响应路由参数和查询参数的变化：

<template>
  <div>
    <h1>Product ID: {{ route.params.id }}</h1>
    <p>Page: {{ route.query.page }}</p>
  </div>
</template>

<script setup>
import { useRoute } from './router'; // 假设我们已经定义了简化版的 router

const route = useRoute();

// 也可以使用 computed 来处理复杂的逻辑
// import { computed } from 'vue';
// const page = computed(() => parseInt(route.query.page || '1'));
</script>

在这个组件中：

我们使用 useRoute() 获取当前的路由对象。
我们直接在模板中使用 route.params.id 和 route.query.page 来显示路由参数和查询参数。

由于 route.params 和 route.query 是响应式对象，所以当它们的值发生变化时，组件会自动重新渲染，显示最新的值。

实际的更新机制：`push` 和 `replace`

那么，路由参数和查询参数是如何被更新的呢？这就涉及到 Vue Router 的导航方法，比如 push 和 replace。

当我们使用 router.push 或 router.replace 进行导航时，Vue Router 内部会做以下几件事：

解析新的路由: 根据传入的 path、params 和 query，解析出新的路由信息。
更新路由对象: 使用新的路由信息更新全局的 $route 对象。关键一步是，会修改 $route.params 和 $route.query 的值。这正是触发响应式更新的关键。
触发组件更新: 由于 $route.params 和 $route.query 是响应式对象，它们的修改会触发依赖它们的组件进行重新渲染。

让我们用代码来模拟一下这个过程：

// 模拟 Vue Router 的导航方法

import { reactive } from 'vue';

// 模拟全局的 $route 对象
const currentRoute = reactive({
  path: '/',
  params: {},
  query: {}
});

function push(newRoute) {
  // 1. 解析新的路由信息
  const { path, params, query } = newRoute;

  // 2. 更新路由对象 (关键步骤)
  currentRoute.path = path;
  // 注意这里不是直接赋值，而是遍历修改已有的 reactive 对象
  for (const key in params) {
    currentRoute.params[key] = params[key];
  }
  for (const key in query) {
    currentRoute.query[key] = query[key];
  }

  console.log('Route updated:', currentRoute); // 观察路由的变化
}

// 模拟组件中使用 $route
function MyComponent() {
  return {
    template: `
      <div>
        <h1>Current Path: {{ currentRoute.path }}</h1>
        <p>Product ID: {{ currentRoute.params.id }}</p>
        <p>Page: {{ currentRoute.query.page }}</p>
      </div>
    `,
    setup() {
      return {
        currentRoute
      };
    }
  };
}

// 使用示例
const app = Vue.createApp(MyComponent());
app.mount('#app');

// 模拟导航
setTimeout(() => {
  push({
    path: '/product/456',
    params: { id: '456' },
    query: { page: '2' }
  });
}, 2000);

在这个例子中，push 函数模拟了 Vue Router 的导航过程。注意，更新 currentRoute.params 和 currentRoute.query 时，我们 不是直接赋值一个新的对象，而是 遍历修改已有的响应式对象。这是非常重要的，直接赋值会破坏响应式，导致组件无法正确更新。

源码中的细节：`normalizeLocation` 和 `resolve`

实际的 Vue Router 源码中，还有很多细节处理，比如：

normalizeLocation: 规范化路由的配置，将各种形式的路由配置转换成统一的格式。
resolve: 将路由配置解析成最终的 URL。

这些细节虽然重要，但它们主要负责路由的解析和匹配，而不是响应式更新的核心机制。

总结：响应式的核心在于 `reactive` 和对象修改

Vue Router 实现路由参数和查询参数的响应式更新，核心在于：

使用 reactive 将路由信息（params 和 query）变成响应式对象。
在导航时，修改已有的响应式对象，而不是直接赋值一个新的对象。

通过这两个关键步骤，Vue Router 能够确保当路由参数和查询参数发生变化时，相关的组件能够及时地感知到并进行更新。

希望这次深入浅出的讲解能够帮助你更好地理解 Vue Router 的响应式奥秘。记住，理解源码最好的方法就是自己动手调试，尝试修改和运行代码，你会发现更多有趣的东西。下次再见！

Vue Router 的响应式奥秘：路由参数和查询参数的华丽转身

路由参数和查询参数：傻傻分不清？

响应式的基石：reactive 和 watch

源码探秘：createRoute 和 useRoute

组件中的响应式使用：useRoute 的威力

实际的更新机制：push 和 replace

源码中的细节：normalizeLocation 和 resolve

总结：响应式的核心在于 reactive 和对象修改

发表回复 取消回复