Performance difference between render and non-render for vue list component

item.vue

<template>
  <div class="item">{{ number }}</div>
</template>

<script>
export default {
  name: 'TestItem',
  props: {
    number: Number
  }
}
</script>

itemList.vue

<template>
  <div class="item-list">
    <item v-if="show" v-for="number in 10000" :key="number" :number="number"></item>
  </div>
</template>

<script>
import Item from './item'
export default {
  name: 'TestItemList',
  components: {
    Item
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
}
</script>

renderedItemList.js

import Item from './item'
export default {
  name: 'TestItemNewList',
  components: {
    Item
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      numbers: Array.from({ length: 10000 }).map((i, index) => index + 1)
    }
  },
  render (h) {
    if (this.show) {
      return <div class="item-list">
        { this.numbers.map(number => <item number={ number } key={ number }></item>) }
      </div>
    } else {
      return null
    }
  }
}

renderedItemList.js use render function to render a large amount of item list, while itemList simply render every item via <item> component.

There's a big perf difference between these two implementations, I would put some stats on later.