微客导航 » 文章资讯 » Vue Render函数原理及代码实例解析

Vue Render函数原理及代码实例解析

2023-07-19 13:59:03 293

简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h

虽然在render里使用createElement函数创建DOM节点不是很直观，但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下：







Document

另外，由于v-if，v-else，v-show等指令都无法在render里使用，需要自己手动实现，拿常用的v-model举个栗子：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Vue.component('my-component',{
data(){
return{
message:''
}
},
render(createElement){
returncreateElement(
'div',
[
createElement(
'input',
{
on:{
input:e=>this.message=e.target.value
}
}
),
createElement('p',this.message)
]
)
}
})

返回顶部
3162201930
czq8825@qq.com

Vue Render函数原理及代码实例解析

热门推荐

随机推荐