Vue key属性失效问题：复用组件数据异常恢复默认值

看起来你遇到的这个问题很典型——明明加了key想避免组件复用，但组件间的数据还是互相干扰，尤其是第二个组件加载时第一个会莫名变回默认值。我来帮你拆解可能的原因和对应的解决办法：

1. 先检查组件的data选项是否正确返回函数 #

这是最容易踩的坑！如果你的组件data不是返回一个函数，而是直接返回一个对象，那么所有组件实例会共享同一个数据对象，一个实例修改数据会直接影响其他所有实例。

❌ 错误写法：

export default {
  data: {
    content: '默认值',
    loading: false
  }
}

✅ 正确写法：

export default {
  data() {
    return {
      content: '默认值',
      loading: false
    }
  }
}

Vue要求组件的data必须是一个函数，这样每个实例都会创建独立的数据副本，彻底避免实例间的数据串用。

2. 确认key属性是唯一且稳定的 #

你提到用了key，但要确保每个组件的key是唯一且不会随意变化的。比如如果是循环渲染组件，别用列表索引当key（列表顺序变化时会出问题），最好用每个组件对应数据的唯一标识（比如ID）；如果是手动写四个组件，也要给每个分配不同的key：

✅ 正确示例：

<!-- 循环渲染的情况 -->
<my-comp 
  v-for="item in compList" 
  :key="item.id" 
  :url="item.url"
></my-comp>

<!-- 手动写四个组件的情况 -->
<my-comp key="comp-1" url="/api/data1"></my-comp>
<my-comp key="comp-2" url="/api/data2"></my-comp>
<my-comp key="comp-3" url="/api/data3"></my-comp>
<my-comp key="comp-4" url="/api/data4"></my-comp>

如果key重复或者不稳定，Vue还是可能复用组件实例，导致数据被意外重置。

3. 检查数据获取逻辑是否存在共享状态 #

如果你的组件内部用了全局变量、Vuex中未命名空间的状态，或者共享的请求实例（比如同一个axios实例的拦截器修改了全局数据），也会导致数据互相影响。

比如这样写就会出问题：
❌ 错误（用全局变量存储数据）：

// 全局变量，所有组件共享
let globalContent = '默认值'

export default {
  props: ['url'],
  async created() {
    const res = await fetch(this.url)
    globalContent = res.data
    this.content = globalContent
  }
}

✅ 正确做法：用组件自身的data存储请求结果，确保每个实例独立处理数据：

export default {
  props: ['url'],
  data() {
    return {
      content: '默认值',
      loading: false
    }
  },
  async created() {
    this.loading = true
    try {
      const res = await fetch(this.url)
      this.content = res.data
    } catch (err) {
      console.error('数据加载失败:', err)
    } finally {
      this.loading = false
    }
  }
}

4. 避免在生命周期钩子中意外重置数据 #

检查组件的mounted、updated等钩子，有没有不小心写了重置content的逻辑。比如如果在updated中误写了this.content = '默认值'，当第二个组件触发父组件更新时，第一个组件的updated钩子会执行，导致数据被莫名重置。

最后验证方向 #

按照上面几点逐一排查后，再测试：

• 每个组件实例的data是否完全独立
• key是否唯一且稳定
• 数据获取逻辑是否完全隔离

这样应该就能解决第一个组件数据被重置的问题，每个组件都能正确展示自己请求到的数据。

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