Vue中数组项与计算数组项的模板渲染触发差异原因

核心原因 #

你遇到的问题不是这种方式不被支持，而是没摸透Vue 2计算属性的缓存机制和响应式追踪逻辑：

• 计算属性仅在依赖发生响应式变化时才会重新计算，默认是缓存的，首次执行后就复用结果，直到依赖更新。
• 你通过计算属性生成的新数组项，是脱离原响应式体系的新对象——修改这些新对象的属性，不会触发计算属性的依赖变化，自然也不会让模板更新。

对应现象的具体解释 #

1. 计算属性仅执行一次：原数组的引用或响应式属性未发生变化时，计算属性会一直复用缓存的结果。
2. 修改原数组项时计算数组序列化值变但模板无更新：如果v-for的:key用了原数组的属性（比如id），Vue会认为DOM节点可复用，哪怕计算数组的项内容变了，也不会重新渲染对应节点；但直接显示计算属性的内容时，会读取最新的计算结果，所以有效。
3. 修改计算数组项后仅再次修改原数组才更新：修改计算数组的项不会触发依赖变化，计算属性不重新执行；只有修改原数组触发依赖更新后，计算属性才会重新生成新数组，模板才会更新一次，之后再改计算数组项又回到无响应状态。

可行解决方案 #

方案1：通过修改原数组触发计算属性更新

不要直接修改计算属性返回的对象，而是修改原数组的响应式属性。计算属性会自动重新执行，生成带扩展属性的新数组，模板也会同步更新。

方案2：将扩展数组存入data，用watch同步原数组变化

把扩展后的数组放到组件的data中，通过watch监听原数组的变化（开启deep: true），同步更新data里的扩展数组。这样扩展数组是响应式的，修改它的项属性会直接触发模板更新：

<template>
  <div v-for="item in extendedList" :key="item.id">
    {{ item.name }} - {{ item.extraProp }}
    <button @click="toggleExtra(item.id)">切换</button>
  </div>
</template>

<script>
export default {
  props: ['originalList'],
  data() {
    return {
      extendedList: []
    }
  },
  watch: {
    originalList: {
      deep: true,
      handler(val) {
        this.extendedList = val.map(item => ({
          ...item,
          extraProp: false
        }))
      }
    }
  },
  created() {
    // 初始化扩展数组
    this.extendedList = this.originalList.map(item => ({
      ...item,
      extraProp: false
    }))
  },
  methods: {
    toggleExtra(id) {
      const item = this.extendedList.find(i => i.id === id)
      this.$set(item, 'extraProp', !item.extraProp)
    }
  }
}
</script>

方案3：用独立状态存储扩展属性

如果扩展属性是临时状态，不需要同步回原数组，可以用一个data对象存储扩展属性的映射，计算属性里合并原数组和这个映射：

<template>
  <div v-for="item in extendedList" :key="item.id">
    {{ item.name }} - {{ item.extraProp }}
    <button @click="toggleExtra(item.id)">切换</button>
  </div>
</template>

<script>
export default {
  props: ['originalList'],
  data() {
    return {
      extraPropsMap: {} // 格式：{ [itemId]: 扩展属性值 }
    }
  },
  computed: {
    extendedList() {
      return this.originalList.map(item => ({
        ...item,
        extraProp: this.extraPropsMap[item.id] || false
      }))
    }
  },
  methods: {
    toggleExtra(id) {
      this.$set(this.extraPropsMap, id, !this.extraPropsMap[id])
    }
  }
}
</script>

总结 #

用计算属性包装数组扩展属性的方式是可行的，但绝对不能直接修改计算属性返回的对象——这些对象不属于Vue的响应式追踪体系，修改它们不会触发任何更新。必须通过修改计算属性的依赖（原数组或data中的状态）来驱动计算属性重新执行，进而更新模板。

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