Vue3中执行函数后重新渲染组件：现有实现是否合规？有无更优方案？

你用修改key值来强制Counter组件重新渲染的方式是可行的，但算不上最佳实践——这种方式本质是销毁旧组件实例、创建新实例，会带来额外的性能开销，要是组件里有生命周期钩子（比如mounted里的请求、事件监听），还会重复触发，可能造成不必要的副作用。

更优的实现方式分这几种，根据你的场景选择：

1. 用props传递响应式状态（最推荐） #

如果Counter的显示内容依赖外部状态（比如购买后的计数、库存），直接把这个状态作为props传给组件。当buy函数修改状态时，Counter会自动响应更新，完全不需要强制重建。

示例代码：

<!-- 父组件 -->
<script setup>
import Counter from './Counter.vue'
const totalCount = ref(0)

const buy = () => {
  // 执行购买逻辑后更新状态
  totalCount.value += 1
}
</script>

<template>
  <button @click="buy">购买</button>
  <Counter :count="totalCount" />
</template>

<!-- Counter组件 -->
<script setup>
const props = defineProps(['count'])
</script>

<template>
  <div>已购数量：{{ count }}</div>
</template>

2. 调用组件内部的更新方法 #

如果Counter有自己的内部状态，不想通过props透传，可以用ref获取组件实例，在buy函数执行后调用组件暴露的更新方法。

示例代码：

<!-- 父组件 -->
<script setup>
import Counter from './Counter.vue'
const counterInstance = ref(null)

const buy = () => {
  // 购买逻辑执行完毕
  counterInstance.value?.refreshCounter()
}
</script>

<template>
  <button @click="buy">购买</button>
  <Counter ref="counterInstance" />
</template>

<!-- Counter组件 -->
<script setup>
const innerCount = ref(0)
const refreshCounter = () => {
  // 这里写组件内部的更新逻辑，比如重新拉取最新数据
  innerCount.value += 1
}
// 把方法暴露给父组件
defineExpose({ refreshCounter })
</script>

3. 更新组件依赖的响应式数据源 #

如果Counter依赖的是外部数据（比如接口返回的库存），在buy函数执行后重新请求数据，更新对应的响应式变量，Counter会自动重新渲染，根本不需要手动触发重建。

总结 #

只有在组件内部状态彻底混乱、无法通过响应式系统正常更新的极端场景下，才考虑用key强制重建组件。日常开发优先用响应式状态驱动的方式，更符合Vue的设计理念，性能也更好。

内容的提问来源于stack exchange，提问作者Maks