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

作者：viewts 时间：2023-07-02 16:34:38　

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

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component :list="list"></my-component>
</div>
<script src="vue.js"></script>
<script>
Vue.component('my-component', {
props: {
list: {
type: Array,
default: () => []
}
},
render(createElement) {
if (this.list.length) {
return createElement('ul', this.list.map(item => createElement('li', item)))
} else {
return createElement('p', 'Empty list')
}
}
})
new Vue({
el: '#app',
data: {
list: ['html', 'css', 'javascript']
}
})
</script>
</body>
</html>

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

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

来源：https://www.cnblogs.com/viewts/p/11208452.html

标签：Vue,Render,函数

投稿

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

猜你喜欢

mysql性能优化之索引优化

对python中的pop函数和append函数详解

Vue生产和开发环境如何切换及过滤器的使用

Go语言接口用法实例

python 破解加密zip文件的密码

Go语言中Goroutine的设置方式

用Python实现一个简单的线程池

python实现csv格式文件转为asc格式文件的方法

mysql中的load命令使用方法

Scripting.Dictionary 对象

matplotlib.pyplot.matshow 矩阵可视化实例

基于Python实现简易的植物识别小系统

MySQL中创建表的三种方法汇总

Python中的Function定义方法第1/2页

Python使用Asyncio进行web编程方法详解

Python短信轰炸的代码

如何使用scrapy中的ItemLoader提取数据

Go使用Gin+mysql实现增删改查的详细实例

Python中DJANGO简单测试实例

Python中的文件输入输出问题