Vue 3跨视图复用同值template ref的潜在问题及实例疑问

结论：完全没问题，不会出现你担心的组件实例复用情况 #

原因可以从这几点理解：

• 路由页面的组件实例完全隔离
  路由切换时，视图A的组件会被销毁，视图B的组件会重新挂载。两个视图的<script setup>是独立的模块，里面定义的foo ref是各自独立的变量，互相没有关联。

• template ref的作用域仅限当前组件
  每个组件实例的template ref都是局部作用域的，哪怕名字相同，也只会绑定到当前组件内定义的对应ref变量。视图A的ref="foo"只会关联到视图A脚本里的foo，视图B的同理，两者互不干扰。

• 组件复用逻辑和template ref无关
  Vue的组件实例复用（比如<KeepAlive>缓存）是基于缓存策略实现的，和template ref的名字没有关系。你这里的路由视图没有使用KeepAlive，切换时旧组件会被销毁，新组件重新创建，不存在复用实例的情况。

实际验证场景 #

你可以在两个视图的onMounted钩子中打印foo.value，会发现输出的是不同的组件实例对象；同时切换路由时，视图A的组件会触发onUnmounted，视图B触发onMounted，完全是独立的生命周期流程。

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