使用Vue组件渲染功能时的无限循环答案

【问题标题】：Infinite loop when using Vue component render function使用Vue组件渲染功能时的无限循环
【发布时间】：2021-06-01 13:18:17
【问题描述】：

我正在使用 Vue 组件来呈现一些表头，如下所示：

render (createElement) {
  return createElement('div', { class: 'header' },
    Array.apply(null, { length: this.initHours.length }).map(() => {
      return createElement('div', { class: 'frame' }, this.getHourIndex() )
    })
  )
}

问题是当 console.log 在 hourIndex 上完成时（通过数组运行）进入无限循环。

getHourIndex 函数是：

getHourIndex () {
  const headerData = this.initHours[this.hourIndex]
  this.hourIndex++
  console.log(this.hourIndex) /// this is what's telling me it's an infinite loop
  return headerData
}

任何关于为什么这样做这个无限循环的方向（考虑到 hourIndex 数组只有 25 个元素）将不胜感激。

【问题讨论】：

标签： javascript vue.js vue-component vue-reactivity vue-render-function

【解决方案1】：

每当组件呈现响应式数据时，如果数据发生变化，它也必须重新呈现该数据。这是反应性的一部分。所以渲染过程本身不应该改变数据，否则会出现死循环：1）渲染，2）数据改变，3）导致重新渲染，4）数据改变，无限循环。

这就是这段代码中发生的事情，因为渲染函数递增this.hourIndex：

this.hourIndex++

如果你只需要索引，从map获取它：

Array.apply(null, { length: this.initHours.length }).map((_, index) => {
  return createElement('div', { class: 'frame' }, index )
})

【讨论】：