Mister-Hope
commented
10 months ago closing as invalid
There are multiple Vue versions in your project.
Everything works fine at VuePress-theme-hope with vue3.4
Closed LdoDoeg222 closed 9 months ago
Mister-Hope
commented
10 months ago closing as invalid
There are multiple Vue versions in your project.
Everything works fine at VuePress-theme-hope with vue3.4
LdoDoeg222
commented
10 months ago Mutiple vue version situation may caused by reproduction when running pnpm install vue@3.4.0 and pnpm install vue@3.3.13
I deleted local /node_modules and use npm to reproduce it.
And you can check the reproduction again.
zr9883
commented
10 months ago 解决了吗？我碰到了和你同样的问题
import { defaultTheme, defineUserConfig } from 'vuepress'
export default defineUserConfig({ title: '左上角标题', theme: defaultTheme({ sidebar: { '/test/': [ { text: '标题测试', children: ['/test/test1', '/test/test2'] } ] } }) })
zr9883
commented
10 months ago 感谢，终于解决了这个问题，安装了 vue 3.3.13版本（npm install vue@3.3.13 --save-dev），之前默认是安装 3.4版本，这个问题我研究了挺久的，一直没发现是 vue 版本问题
Mister-Hope
commented
10 months ago @meteorlxy CC, I also encountered some issue when upgrading to Vue3.4 now, we need to make new versions to land to fix this problem.
@vuepress/shared is using @vue/shared as deps, and it's likely to have 2 different @vue/shared version installed even user are declaring a different vue in his deps.
Mister-Hope
commented
9 months ago @meteorlxy I managed to figure out how this happens, in Vue3.4 the reactivity system is rewritten. See https://blog.vuejs.org/posts/vue-3-4#more-efficient-reactivity-system.
We previously called composition Api hooks like useRouter and userRoute in computed functions, and this works in Vue3.3 and below, while in Vue3.4, these compostion api somehow will return undefined in some cases.
This issue could be solved by moving out the router and route declarations outside the computed:
// before
const sidebar = computed(() =>
resolveSidebar() // called useRouter and useRoute inside it
)
// after
const router = useRouter()
const route = useRoute()
const sidebar = computed(() =>
resolveSidebar(router, route)
)I am not sure if this should be the correct fix, but the change is valid and the direction should be correct. Vue3.4 does have different activity with composition api calls inside computed getter functions.
May need you take a deeper look at this.
Mister-Hope
commented
9 months ago Update: I confirmed calling composition api inside computed getter is not supported in Vue3.4.
I mock a composition api for useRouter like the following:
export const useMock = inject('mock') // mock is provided earlierAnd the test code:
const test = computed(() => {
const mock = useMock();
return mock;
})Vue 3.3 and below is working fine with no warnings.
Vue 3.4 gives an warning at dev mode:
So we probably need the change I mentioned above. However, a lot of changes may not be needed once the router pr is merged, so I'd request you to review that and publish upstream.
Mister-Hope
commented
9 months ago
Description
When I use vue 3.4.0 and then run
pnpm docs:dev, and then open my local vuepress site, the navbar and sidebar will lose their responsive capability. 当我用 vue 3.4.0 并且运行pnpm docs:dev，再打开本地的 Vuepress 网页时，顶部导航和侧边栏都会失去它们的响应性。The guide in guide of vuepress tells me to install vue normally like
pnpm add -D vue在官方文档中提到的方法，只是简单地让我直接安装 vue——pnpm add -D vueThis situation is the same in higher version (3.4.14, which is the lastest version) 同样的情况（指失去响应性）当然也发生在了更高版本。
However, if i install vue 3.3.13 like the official documents do, it will run responsively. 然而，如果我像官方文档里写的一样，为我的 vuepress 安装 vue 3.3.13，又可以成功运行了。
This problem may caused by the update of vue 3.4, which added some breaking features. 这可能是因为 vue3.4 的更新带来了一些新特性。
Reproduction
https://github.com/LdoDoeg222/vuepress-bugrepo
Used Package Manager
pnpm
System Info