为什么onUpdated调用了两次

这是我的导航组件,每次点击按钮都导航到about.vue,通过传递不同id显示不同的内容。

<template>
  <button @click="onClick('1')">A</button>
  <button @click="onClick('2')">B</button>
  <button @click="onClick('3')">C</button>
  <br>
  <router-view></router-view>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const onClick = (id) => router.push({name: 'about', params: {id}})
</script>

这是about.vue路由组件,组件更新的时候在 onBeforeRouteUpdate 对count + 1。现在的问题是每次 ouUpdated() 都会调用两次,在控制台会看见输出了两次updated,有什么办法可以解决这个问题吗?

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref, onUpdated } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'

onUpdated(() => console.log('updated'))

const count = ref(0)
onBeforeRouteUpdate((to, from) => {
  count.value += 1
})
</script>

把你的const count = ref(0)改为let count = 0就不会触发两次了
你路由push的时候就会触发一次更新,改值的时候触发一次更新,两次更新没问题
两次update的顺序及原因

  1. about before update → render → updated 因为你onBeforeRouteUpdate里对count进行了+1
  2. about before update → render → updated 是因为router跳转触发的更新(你的params的值不同)