请教 Vue3 的 defineComponent 函数使用

[Artiver]

各位好，我又来请教个 Vue3 的问题，标签页系统使用 defineComponent 创建组件，实现刷新功能。由于组件需要缓存，使用了 keepalive ，于是用 pinia 存储组件的 name 属性，所以创建时在 name 加上时间戳将其表示唯一。

GitHub 地址

createNode.js的部分代码片段如下，本意是想看下创建组件时的时间戳：

function getTimeStamp() {
  let timeNow = Date.now();
  console.log("create: ", timeNow);
  return timeNow;
}

export function createNameComponent(component) {
  return () => {
    return new Promise((resolve) => {
      component().then((comm) => {
        const tempComm = defineComponent({
          name: (comm.default.name || "vueAdminBox") + "_" + getTimeStamp(),
          props: comm.default.props || {},
          ...

当前实现效果如下：

可以看到，组件只有第一次打开时会触发getTimeStamp函数，关闭再打开就不会重新获取时间戳了。

我期望每次打开标签页都是不同的时间戳，有老哥遇到这个问题吗？

[shakukansp]

稍微看了看，你这 router 的 modules 里面每个路由的 component 只调了一次啊

你要重复调用 createNameComponent ，得用 addRoute 和 remove route 修改记录

[jspatrick]

问题应该就是这个了，keep-alive 缓存路由不应该依靠组件的 name ，或许应该用 route 的 path

[leokun]

https://github.com/Artiver/vue3-admin-box/blob/keepalive/src/router/modules/service.js#L27
这个代码只调用了一次

[leokun]

不要定义静态路由，而是通过 addRoute 动态追加路由和组件
https://router.vuejs.org/zh/guide/advanced/dynamic-routing#%E5%9C%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%B8%AD%E6%B7%BB%E5%8A%A0%E8%B7%AF%E7%94%B1

[Artiver]

@leokun
@shakukansp

感谢两位，请问是这样注册动态路由吗，好像还是只会被调用一次。

https://github.com/Artiver/vue3-admin-box/blob/keepalive/src/router/dynamicRegister.js


[Artiver]

@jspatrick 感谢，我也看到了 vue-router 的相关说明

https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96

不过我看官方说是按照 name 进行 keepalive 的，有其他的方式吗

https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude

[jspatrick]

@Artiver #6 我的意思是，如果路由不同，应当使用不同的页面组件，这样也不会产生需要缓存相同组件的需求

[shakukansp]

@Artiver 是让你在点击链接和关闭标签页的时候进行路由的添加删除操作

[etU3NtUmMJhoxInh]

这个问题可能是因为在组件第一次加载时，getTimeStamp 函数只在组件的生命周期里执行一次，后续打开该组件时，Vue 的缓存机制会导致组件不会重新初始化，因此不会重新调用 getTimeStamp 。

要确保每次打开标签页时都能生成新的时间戳，你需要确保 getTimeStamp 在每次组件实例化时都被调用，而不是只在组件首次加载时调用。你可以通过 Vue 的生命周期钩子来实现，例如 beforeCreate 或 created 。
你可以将 getTimeStamp 放在组件的生命周期钩子中，确保每次组件被加载时都会生成新的时间戳。

function getTimeStamp() {
let timeNow = Date.now();
console.log("create: ", timeNow);
return timeNow;
}

export function createNameComponent(component) {
return () => {
return new Promise((resolve) => {
component().then((comm) => {
const tempComm = defineComponent({
name: comm.default.name || "vueAdminBox",
props: comm.default.props || {},
created() {
this.$options.name = (comm.default.name || "vueAdminBox") + "_" + getTimeStamp();
},
});
resolve(tempComm);
});
});
};
}

[KouShuiYu]

@Artiver
#6
可以参考我这篇博客
https://chenkai.life/vue/vue%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E7%BC%93%E5%AD%98/#%E8%AE%BE%E7%BD%AEcomponent%E7%9A%84key

[Artiver]

@jspatrick
@KouShuiYu

是这样的，我应该把需求描述清楚一些，当前是一个文章列表，想复用文章这个组件，动态路由是/article/detail/:id ，希望是每篇文章都能开一个标签页，但是缓存各个组件不受影响，当前因为 name 只会被创建一次，导致无论开多少文章，keepalive 里面只有一个，如果关闭其中一个会导致其他页签都被刷新，所以在寻求方法。

https://img.z4a.net/images/2024/09/20/20240920_210137.gif

[Artiver]

@DoYouWantPeach 这个在组件的生命周期里面修改 name 属性，在 router.afterEach 获取不到。

[Artiver]

感谢各位的意见，已经解决了，其实按照二楼的想法是可以的，按照 path 来缓存，重点是如何更新 keepalive 的值

https://github.com/Artiver/vue3-admin-box/blob/master/src/layout/TabsIndex.vue#L17

参考文章： https://juejin.cn/post/7412548172453494836