关于vue3.0+vite+jsx视图不会更新问题的解决

  之前我的项目是vue3.0+webpack搭建的，但是vite2.0出来之后，我就想试试水把webapck替换成vite，毕竟vite启动太快啦。
  但是很快我就遇到了一个难以解决的问题，代码如下：

<template>
  <xx :render="render"/>
</template>

<script lang="tsx">
import { ref, defineComponent, h  } from 'vue'
export default defineComponent({
  components: {
    xx: props => props.render(h)
  },
  data(){
    return {
      options: [],
      data: '0'
    }
  },
  methods: {
  	focus(){
      setTimeout(()=>{
        const count = this.options.length
        this.options.push({label: count, value: count})
      },1000)
    },
    render(){
      return <el-select v-model={this.data} onFocus={()=>{this.focus()}}>
        {this.options.map(item=>
          return <el-option value={item.value} label={item.label}></el-option>
        )}
      </el-select>
    }
  }
})
</script>

  这段代码在webpack下没有问题，但是转成vite之后就有问题了，问题是options每次都变化了，但是视图没有响应式更新。
  后面讲render改写如下，在el-select下加一个片段解决这个问题

render(){
      return <el-select v-model={this.data} onFocus={()=>{this.focus()}}>
      	<>
        {this.options.map(item=>
          return <el-option value={item.value} label={item.label}></el-option>
        )}
        </>
      </el-select>
    }

  如果你的项目也出现了类似这种情况，可以试试为你的默认插槽加上一个片段，充当根节点。