Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用render渲染函数,它比模板更接近编译器
。
在Vue2中,render函数是一个可选的、用于生成虚拟DOM的特殊函数。它是Vue实例的一个选项,允许开发者使用JavaScript编写模板,而不是使用HTML模板。render函数接收一个h函数(h函数是createElement的别名。很多人喜欢用createElement,形参不过是个名称而已)作为参数,该函数用于创建虚拟节点(VNode)。
下面是一个render函数简单示例:
render(h) {
return h('h1', 'Hello, Vue!')
}
上面是一个简单写法,完整来说,h函数接受三个参数:
第一个参数:可以是字符串(表示HTML标签名或组件名)、组件对象或函数。如果是自定义组件,需要确保组件已经在当前实例或全局注册。
第二个参数:属性对象,包含传递给子组件的props、attrs、class、style等。
第三个参数:子节点,可以是字符串、数组或对象。
当第一个参数为HTML标签名的时候,常用配置如下