Vue 3兼容构建迁移问题：created钩子设置$options.template失效求助

在Vue 2中，我们常通过在created钩子中修改this.$options.template来动态设置组件模板，就像这样：

created() {
  this.$options.template = this.compiledTemplate;
}

但升级到Vue 3.2.47兼容构建后，这种写法会触发Component is missing template or render function.警告，组件也无法正常渲染——这是因为Vue 3的组件初始化流程和Vue 2有本质区别，created钩子执行时，组件的模板编译和渲染函数初始化已经完成，此时修改$options.template根本不会生效。

如果你试过Vue.compile但没解决问题，大概率是用法不对，下面给出几种可行的解决方案：

方案1：在setup中直接返回渲染函数（组合式API） #

Vue 3的setup函数在组件实例创建早期执行，直接返回渲染函数是最直接的方式：

<script setup>
import { h } from 'vue'

// 定义接收的props
const props = defineProps({
  compiledTemplate: {
    type: String,
    required: true
  }
})

// 基于传入的模板创建渲染函数
const render = () => h({
  template: props.compiledTemplate
})

// 返回渲染函数供组件使用
return render
</script>

方案2：用选项式API定义render函数 #

如果你还在使用选项式API，可以直接在组件选项中声明render函数，替代之前在created中修改模板的逻辑：

export default {
  props: {
    compiledTemplate: {
      type: String,
      required: true
    }
  },
  render() {
    // 基于传入的模板生成虚拟DOM
    return this.$createElement({
      template: this.compiledTemplate
    })
  }
}

方案3：正确使用compile编译模板 #

compile在Vue 3中需要从vue包导入，它返回包含render函数的对象，我们需要直接使用这个render函数，而不是再去修改$options.template：

<script setup>
import { compile } from 'vue'

const props = defineProps({
  compiledTemplate: {
    type: String,
    required: true
  }
})

// 编译模板得到渲染函数
const { render } = compile(props.compiledTemplate)

return render
</script>

需要注意的是，以上方案都能保证响应式——当父组件传入的compiledTemplate变化时，组件会自动重新渲染新的模板。

内容的提问来源于stack exchange，提问作者JGABBA