render 函数使用

VUE一般使用template来创建组件 ，然后VUE渲染在页面上。

如果某些环境下，需要使用JS来创建html的DOM节点，这时候要使用render函数了:

 

• 详细：

  字符串模板之外的另一种选择，允许你充分利用 JavaScript 的编程功能

<div id="app" class="demo">
  <my-title blog-title="A Perfect Vue"></my-title>
</div>

const { createApp, h } = Vue
const app = createApp({})
app.component('my-title', {
  render() {
    return h(
      'h1',           // 标签名称
      this.blogTitle  // 标签内容
    )
  },
  props: {
    blogTitle: {
      type: String,
      required: true
    }
  }
})

app.mount('#app')

render 函数的优先级高于根据 template 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。

h函数千万别忘记导入。

render 函数其实也可以进行一个嵌套。

 

关于h函数的用法：

详细浏览官网文档：https://v3.cn.vuejs.org/guide/render-function.html

---

 

 

过程：

template -> render  -> h -> 虚拟DOM(JS对象) ->  真实DOM  -> 渲染到页面