Vue2中slot-scope结合v-for时数据更新不渲染问题求助

嘿，我刚好之前踩过这个Vue2的坑，太懂你这种数据变了但页面没反应的抓狂感了😅

问题根源 #

你把v-for直接写在<slot>标签上的写法，在Vue2里是存在缺陷的。因为<slot>是Vue的内容分发出口，属于特殊的节点类型，Vue的响应式系统和diff算法没办法正确追踪到list数组的变化，也就不会触发循环slot内容的重新渲染。

修复方案：用<template>包裹slot承载v-for #

把v-for移到<template>标签上，在template内部渲染slot，这样Vue就能正确识别循环的依赖关系，数据更新时自然会触发页面重新渲染。

修改后的子组件模板：

<template id="list-template">
  <div>
    <ul>
      <!-- 用template承载v-for，内部渲染slot -->
      <template v-for="item in list" :key="item.id">
        <slot name="row" :item="item"></slot>
      </template>
    </ul>
  </div>
</template>

关键注意点 #

1. 必须绑定:key：循环时一定要给每个节点绑定唯一的key值（比如item的id），这能帮助Vue的diff算法更高效地识别节点变化，避免不必要的渲染异常。
2. 保证数据更新的响应式：如果是新增/删除数组元素，要使用Vue的数组变异方法（push/splice/pop等），或者直接替换整个数组；如果是修改对象属性，只要对象本身是从data中初始化的响应式对象，直接修改属性就会触发更新。

给你一个完整的使用示例参考：

<div id="app">
  <list-component :list="list">
    <li slot="row" slot-scope="{ item }">
      {{ item.text }} - {{ item.done ? '已完成' : '未完成' }}
      <button @click.prevent="toggleDone(item)">切换状态</button>
    </li>
  </list-component>
</div>

脚本部分：

Vue.component('list-component', {
  props: ['list'],
  template: '#list-template'
})

new Vue({
  el: '#app',
  data() {
    return {
      list: [
        { id: 1, text: '学习Vue2', done: false },
        { id: 2, text: '解决slot渲染问题', done: false }
      ]
    }
  },
  methods: {
    toggleDone(item) {
      item.done = !item.done;
    }
  }
})

这样修改后，当你修改item状态或者更新list数组时，页面就会正确响应渲染了。

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