Using the key attribute to control component refresh in vue failed

[pengzihao2002]

I need to click a button to modify the key value of the component through the bound function, and I find that the key value has changed, but the component is not unloaded for re-rendering.

I checked a lot of information on the Internet, found that they are so to achieve page refresh, this problem has been troubled for a long time.

I hope there are kind people to guide me how to correctly use the key attribute to complete the page refresh.

<template>
  <!-- 路由组件出口 -->
  <!-- v-slot可以获取当前渲染的组件以及路由信息 -->
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <!-- 渲染home一级路由的子路由 -->
      <component :is="Component" :key="refreshContent"/>
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import emitter from "@/utils/emitter";
import { onUnmounted, onMounted } from "vue";


let refreshContent = 0

emitter.on('refresh_content', () => {
  refreshContent += 1
  console.log(refreshContent)
})

onMounted(() => {
  console.log('load')
})

onUnmounted(() => {
  emitter.off('refresh_content')
  console.log('unload')
})

</script>

<style scoped>
.fade-enter-from {
  opacity: 0;
  transform: scale(0)
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}

.fade-enter-active {
  transform: all 0.5s;
}
</style>```

[LinusBorg]

refresh_content is a plain, nonreactive variable. Changing it will not trigger a re-render, and so won't update the key. use a ref() instead

[pengzihao2002]

Oh, thank you. Although I found the solution on another website an hour ago, thank you anyway. I also want to ask you, do components in vue rely on reactive data for rendering, because key-bound variables need to be reactive, so that when the key value changes, vue can quickly detect and render components? Is that right?

[LinusBorg]

Vue does rely on reactive data for rendering, that's kind of Vue's major mechanism. I'm not sure I understand what you are asking here specifically. Can you give an example?

[pengzihao2002]

Excuse me, but in my case, using the :key attribute dynamically binds the attribute using the v-bind directive in vue.
Does vue's rendering mechanism keep track of these dynamically bound data and add an update tag to each dynamically bound element so that vue can update quickly?

[LinusBorg]

Yes, as long as the data is reactive it will be tracked during rendering

[pengzihao2002]

Thanks my friend, this is love from China.