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

Question

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

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 个元素）将不胜感激。

Answer 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 )
})

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

Infinite loop when using Vue component render function

javascript

vue.js

vue-component

vue-reactivity

vue-render-function