Vue.js渲染时计算数组传props触发无限循环错误如何解决

报错根因 #

你在模板渲染阶段调用的valueOfMeasurement方法中，修改了组件的响应式状态（this.arrayOfValues、this.counter）。Vue的响应式机制会在状态变更时触发组件重新渲染，而重新渲染又会再次调用该方法修改状态，由此形成无限循环，触发对应报错。

核心规则：所有在模板渲染过程中执行的方法，都不允许修改组件的响应式状态

解决方案 #

方案1：方法内使用局部变量（最简单的快速修复） #

不要把临时计算用的数组、计数器定义在组件的data选项里，直接在方法内部声明局部变量即可，避免修改响应式状态：

methods:{
  valueOfMeasurement(measurement) {
    // 声明局部变量，不涉及响应式状态修改
    const arrayOfValues = []
    for (let counter = 0; counter < this.message.feeds.length; counter++) {
      arrayOfValues.push(this.message.feeds[counter]["field" + measurement.fieldId])
    }
    return arrayOfValues
  }
}

方案2：改用计算属性预计算（性能更优） #

如果measurements和message.feeds不会高频变动，更推荐用计算属性提前把所有测量项对应的数据批量算好，避免渲染时重复执行计算逻辑，性能更好：

computed: {
  // 预生成测量项ID对应数值数组的映射表
  measurementValueMap() {
    return this.measurements.reduce((resultMap, measurement) => {
      const values = this.message.feeds.map(feed => feed["field" + measurement.fieldId])
      resultMap[measurement.id] = values
      return resultMap
    }, {})
  }
}

对应的父组件模板修改为：

<div
  v-for="measurement in measurements"
  :key="measurement.id"
>
  <graph-component
    :value="measurementValueMap[measurement.id]"
  ></graph-component>
</div>

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