Vue 相同命名v-slot的v-for模板中 依赖同数据的computed仅触发单个是Bug还是设计？

你遇到的现象既不是Vue的官方设计逻辑，也不属于框架Bug，核心是两处模板语法错误导致computed从未被有效引用，完全不涉及“同数据源computed不触发”的问题。

具体原因拆解 #

• 第一处是v-slot动态插槽名的书写语法错误
  你写的v-slot:['sameSlot]`存在引号不匹配：开头用了单引号，结尾错用了反引号，完全不符合Vue模板的解析规则。编译器在遇到这类语法错误时会做容错处理，大概率会跳过后续关联的节点编译逻辑。
• 第二处是v-slot的使用上下文完全错误
  v-slot是专门用来给带自定义插槽的子组件定义传入内容的指令，只能用在作为子组件直接子节点的template标签上。你写的三个template是完全孤立的节点，没有嵌套在任何带sameSlot插槽的子组件内部，按照Vue的编译规则，这类孤立、绑定了v-slot的template会被判定为无效节点，直接跳过渲染流程，根本不会执行节点内部写的item in foo、item in bar、item in baz这类遍历表达式。

触发逻辑说明 #

Vue的computed是惰性求值的：只有当computed被至少一个有效渲染节点、或者其他响应式逻辑明确引用时，才会执行求值函数、打印日志。否则哪怕它依赖的数据源（比如你的someData）发生变化，只要没有任何代码引用这个computed，它就不会被执行。
你的场景里三个computed的引用都写在了无效的template节点里，根本没被有效代码访问到，自然不会打印日志、不会参与渲染。你看到的某一个computed的输出，大概率是开发过程中手动在控制台访问过该属性，或者其他未贴出的代码片段意外引用了该computed。

验证修复方式 #

1. 修正v-slot的引号语法错误，移除多余的括号和错配的反引号。固定插槽名直接写v-slot:sameSlot即可，不需要用动态语法包裹
2. 把三个template节点嵌套在真实的、带sameSlot插槽的子组件内部，比如：

   <ChildComponent>
     <template v-for="item in foo" v-slot:sameSlot="{ sameBlah }">
       {{ JSON.stringify(item) }} 
     </template>
     <template v-for="item in bar" v-slot:sameSlot="{ sameBlah }"> 
       {{ JSON.stringify(item) }} 
     </template>
     <template v-for="item in baz" v-slot:sameSlot="{ sameBlah }">
       {{ JSON.stringify(item) }}
     </template>
   </ChildComponent>
   

这也能解释为什么你换成带过滤参数的通用方法时无法复现问题——因为方法的调用逻辑写在了有效渲染节点里，编译器会正常解析执行，自然不会出现节点被跳过的情况。

修复完成后，三个computed会正常执行、打印日志，渲染结果也会完整展示。 #

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