vue-如何在模板中使用渲染函数生成的vnode

问题遇到的现象和发生背景

如代码所示，test方法返回一个vnode，我应该怎么去使用他，把他替换到ref为testdiv的渲染函数里面。

我想要达到的结果

我的期望是他应该会有一个类似v-render的方法可以直接替换修改-原转换后的渲染函数。但实际上vue好像不存在这个方法，请问有什么办法吗？

我的解答思路和尝试过的方法

之前有用过vue.comp创建组件再用v-is来修改，但是写起来颇为麻烦，且不美观，感觉不该这样子做，怀疑是自己想岔了，走入了误区。

问题相关代码

<template>
  <div>
    <div   v-render='test' ref="testdiv”></div>
    <div>...<!-- 此处省略很多行代码 --></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        text:'，而且获取到了数据'
    };
  },
  computed: {},
  methods: {
    test(){
        return  this.$createElement('span',{},`这是由渲染函数产生的文本vnode${this.text}`)
    }
  },
  mounted() {
    setTimeout(() => {
        this.text.push('，甚至还是响应式的')
    },5000);
  },
};
</script>

render 渲染函数 呈现一个组件状态

<script>
export default {
  name: "RenderCell",
  functional: true,
  props: {
    render: Function,
  },
  render: (h, ctx) => {
    return ctx.props.render(h);
  },
};
</script>

子组件想让其放置在哪使用就让其放置在哪里使用

            <render-cell :render="renderFunc"></render-cell>

renderFunc(){
   return this.render // 这个this.render 就可以是你的this.$createElement('span',{},`这是由渲染函数产生的文本vnode${this.text}`)
}

两者一样的逻辑 你可以参考这个实例去使用

请用自定义指令

<template>
  <div>
    <div   v-demo='test' ></div>
  </div>
</template>

export default {
  data() {
    return {
        text:'，而且获取到了数据'
    };
  },
  computed: {},
 directives: {
                demo: {
                    bind: function (el, binding, vnode) {
                        console.log('el', el, '==========123');
                        console.log('binding', binding, JSON.stringify(binding.expression), '==========123');
                        console.log('vnode', vnode, '==========123');
                        el.innerHTML = `这是由渲染函数产生的文本vnode${JSON.stringify(binding.expression)}`
                    }
                }

            },
  methods: {
  
  },
  mounted() {
   
  },
};

可以使用directives

直接 用变量 {} 应该也可以 吧 。v-html 应该也可以

可以了解下jsx语法，可以再js中嵌入html。类似这种

export default {
  data() {
    return {
        text:'，而且获取到了数据'
    };
  },
  methods: {
    test(){
        return  this.$createElement('span',{},`这是由渲染函数产生的文本vnode${this.text}`)
    }
  },
  render() {
    return (
    <div>
      {this.test()}
      <div>...<!-- 此处省略很多行代码 --></div>
    </div>)
  }
}