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

Posted 2023-02-23

【中文标题】使用Vue组件渲染功能时的无限循环

【英文标题】：Infinite loop when using Vue component render function

【发布时间】：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 个元素）将不胜感激。

【参考方案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 )
)