vue每日一学：理解渲染方式render和template以及它们之间的区别 - Web前端
作者：98wpeu发布时间：2026-09-02分类：网页前端技术浏览：17
导读：今天来温故下旧知识，了解下vue中的渲染方式render和template，它们之间的区别是什么？请一起往下看吧。Vue中的Render函数中有一个参数，这个参数是一个函数通常我们...
今天来温故下旧知识，了解下vue中的渲染方式render和template，它们之间的区别是什么？请一起往下看吧。
Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中。
createElement这个函数中有3个参数
第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数
第二个参数（类型是对象，可选）：用于设置这个dom的一些样式、属性、传的组件的参数、绑定事件之类
第三个参数（类型是数组，数组元素类型是Vnode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的
// @return {VNode}
createElement(
// {string | Object | function}
// 一个html标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
'div',
// {Object}
// 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
{
attrs: {
name: headingId,
href: '#'+headingId
},
style: {
color: 'red',
fontsize: '20px'
},
'class': {
foo: true,
bar: false
},
// DOM属性
domprops: {
innerHTML: 'baz'
},
// 组件props
PRops: {
myProp: 'bar'
},
// 事件监听基于 'on'
// 所以不再支持如 'v-on:keyup.enter' 修饰语
// 需要手动匹配 KeyCode
on: {
click: function(event) {
event.preventDefault();
console.log(111);
}
}
}
// {String | Array}
// 子节点（VNodes）由 createElement() 构建而成。可选参数
// 或简单的使用字符串来生成的 "文本节点"。
[
'xxxx',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'xxx'
}
}),
this.$slots.default
]
)什么时候用render函数？
假设我们要封装一套按钮组件，按钮有四个样式(success、error、warning、default)。首先，你可能会想到如下实现：
<template>
<divclass="BTn btn-success"v-if="type === 'success'">{{ text }}</div>
<divclass="btn btn-danger"v-else-if="type === 'danger'">{{ text }}</div>
<divclass="btn btn-warning"v-else-if="type === 'warning'">{{ text }}</div>
</template>虽然我们这样实现没有问题，但是如果现在有十几个样式的情况下我们就需要写N多个判断，如果遇到了这种情况我们就可以选择使用render函数。
其实简单的来说就是template适合简单的组件封装，然后render函数适合复杂的组件封装。
<script>
vue.component("A-button", {
props: {
type: {
type: String,
default: 'default'
},
text: {
type: String,
default: '按钮'
}
},
computed: {
tag() {
switch(this.type) {
case'success':
return1;
case'danger':
return2;
case'warning':
return3;
default:
return1;
}
}
},
render(h) {
returnh('div', {
class: {
btn: true,
'btn-success': this.type==='success',
'btn-danger': this.type==='danger',
'btn-warning': this.type==='warning'
},
domProps: {
//innerText: this.text,
},
on: {
click: this.handleClick
}
},
this.$Slots.default
);
},
methods: {
handleClick() {
console.log('-----------------------');
console.log('li');
}
}
})
letvm=newVUE({
el: "#APP"
})
</script>template与render函数对比
template----HTML的方式做渲染
render----JS的方式做渲染
render（提供）是一种编译方式
render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。
h就是createElement()方法：createElement(标签名称,属性配置,children)
template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。
区别：
1、render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
2、template是类似于html一样的模板来进行组件的封装。
3、render的性能比template的性能好很多
4、render函数优先级大于template
案例一：template和render的方式渲染标题标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<div id="app">
<h-title level="1">标题</h-title>
<h-title level="2">标题</h-title>
<h-title level="3">标题</h-title>
</div>
<script src="https://unpkg.com/Vue/dist/vue.js"></script>
<script>
Vue.component("h-title",{
/* template渲染 */
// template:`
// <div>
// <h1 v-if="level==1"><slot></slot></h1>
// <h2 v-else-if="level==2"><slot></slot></h2>
// <h3 v-else-if="level==3"><slot></slot></h3>
// </div>
// `,
/* render渲染 */
render:function(h){
// createElement(标签名称,属性配置,children)
return h("h"+this.level,
{
attrs:{
"data-id":10
}
},
// 相当于<slot></slot>标签接收
this.$slots.default
)
},
props:{
level:{
type:String
}
}
});
let vm=new Vue({
el:"#App"
});
</script>
</body>
</html>案例二：render方式模拟button。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="vIEwport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.btn{
width: 80px;
line-height: 40px;
text-align: center;
color:#fff;
border-radius: 5px;
background-color: #ccc;
}
.success{background-color: green;}
.error{background-color: red;}
.info{background-color: pink;}
</style>
</head>
<body>
<div id="app">
<wql-button type="success">成功</wql-button>
<wql-button type="info">提示</wql-button>
<wql-button type="error">报错</wql-button>
<wql-button>默认</wql-button>
</div>
<script src="https://CDN.jsdelivr.net/npm/vue/dist/Vue.js"></script>
<script>
Vue.component("wql-button",{
render:function(h){
return h("div",{
class:{
btn:true,
success:this.type=="success",
error:this.type=="error",
info:this.type=="info"
}
},this.$slots.default);
},
props:{
type:{
type:String
}
}
});
let vm=new Vue({
el:"#app"
});
</script>
</body>
</html>大家试试吧。
相关推荐
- 原生Javascript应用：实现购物车加减以及价格计算功能 - Web前端
- Apache HTTP Server Project 补丁利用零日漏洞 - Web前端
- React 教程：从头开始构建计算器应用程序 - Web前端
- VUE开发小应用：查看各地区天气预报 - Web前端
- Windows 11 升级：首先要问的五个问题 - Web前端
- 如何使用 React Textfit 创建响应式 React 组件 - Web前端
- Google AdSense最新消息：即将改用的最高出价竞价机制，是利是弊呢？ - Web前端
- 谷歌SEO优化：Google搜索的运作方式进阶指南 - Web前端
- 谷歌SEO优化：了解下Google搜索的运作方式的基础知识 - Web前端
- vue每日一学：了解监视（侦听）属性watch和computed以及它们之间的区别 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 9jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性