Vue | Vue深入浅出——Vue中的render函数详解
1.render函数
在编写vue单文件的大多数情况下,我们都是使用template模板来创建HTML。然而在一些条件判断比较复杂的场景下,使用JavaScript去描绘HTML的生成逻辑会显得更加的简洁直观。
使用Vue官网的例子来简单说明:
如果自己在开发的时候,编写的每个标题(包括h1
~h6
)都需要带锚点,如下所示:
<h1><a name="hello-world" href="#hello-world">Hello world!</a>
</h1>
如果用template
模板进行编写,会如下所示:
<template><h1 v-if="level === 1"><anchor :name="name" :content="content"></anchor></h1><h2 v-else-if="level === 2"><anchor :name="name" :content="content"></anchor></h2><h3 v-else-if="level === 3"><anchor :name="name" :content="content"></anchor></h3><h4 v-else-if="level === 4"><anchor :name="name" :content="content"></anchor></h4><h5 v-else-if="level === 5"><anchor :name="name" :content="content"></anchor></h5><h6 v-else-if="level === 6"><anchor :name="name" :content="content"></anchor></h6>
</template>
<script>
export default {name:'anchor-header',props:{level:Number,name:String,content:String},components:{'anchor':{props:{content:String,name:String},template:'<a :id="name" :href="`#${name}`"> {{content}}</a>'}}
}
</script>
显然代码冗长累赘。但如果用render
函数来编写则如下所示:
<script>
export default {name:'anchor-header',props:{level:Number,name:String,content:String},render:function(createElement){const anchor={props:{content:String,name:String},template:'<a :id="name" :href="`#${name}`"> {{content}}</a>'}const anchorEl=createElement(anchor,{props:{content:this.content,name:this.name}})const el=createElement(`h${this.level}`,[anchorEl])return el}
}
</script>
可见通过render
函数编写出的逻辑更加简洁且可读性更高。
每一个render
函数都要return
一个VNode类型的变量,是Vue中自定义的虚拟节点(virtual node),用于替换挂载元素$el。
Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
但自己实践在vue单文件实践后发现,如果同时存在template
和render
,生成的html会以template
的逻辑为主,奇怪。
上述例子的代码可以知道,render
函数使用的场景是,要根据不同条件切换不同HTML标签,可以使用render函数。或者条件判断较多的template
中,用渲染函数编写会让代码的可读性更高的情况下,也推荐使用render
函数。
下面分析上面代码中出现的createElement
函数。
2.createElement
createElement
用于创建且return
一个VNode类型的变量(虚拟节点),以下是该函数的传入参数:
(1)一个 HTML 标签名、组件选项对象或者resolve前面两种之一类型的async函数。必填。
例如,传入'div'表示想创建一个html标签为div的VNode;如果传入'transition'代表创建transition组件。
上面作为粒子的代码就是根据传入的类型为Number
的参数level
,用模板字符串拼接成标签名称。传入level
为1则拼接出来的HTML标签名称为h1
。代表要创建html标签为h1
的VNode。
(2)所创建的VNode中所需参数为属性的数据对象。可选。
{class,style,attrs,props,domProps,on,nativeOn,directives:[{name,value,expression,arg,modifiers}],scopedSlots:{default:props=>createElement()},slot,key,ref,refInFor
}
大部分属性和vue组件中存在的属性的作用一样,我就只挑几个比较特殊的属性来说明:
**nativeOn:**用于监听原生事件,而不是组件内使用。例如:
nativeOn: {click: this.nativeClickHandler}
相当于@click.native="nativeClickHandler"
scopedSlots:定义作用域插槽的内部的内容:
格式为:{ name: props => VNode | Array<VNode> }
举一个例子:
<script>
export default {render (createElement) {var component = {template: `<div><slot></slot><slot name="foo"></slot></div>`}return createElement(component, {scopedSlots: {default: props => createElement('span', '456'),foo: props => createElement('span', '789')},})}
}
</script>
最后渲染出来的html效果如下:
<div><span>456</span><span>789</span>
</div>
scope:如果要生成的组件要插入到,需为插槽指定名称。
举个例子
<script>
export default {render (createElement) {var component = {template: `<div><slot></slot><slot name="foo"></slot></div>`}const childrenEl = createElement('span', { slot: 'foo' }, '123')return createElement(component, {scopedSlots: {default: props => createElement('span', '456')// foo: props => createElement('span', '789') },}, [childrenEl])}
}
</script>
最后渲染出来的html效果如下:
<div><span>456</span><span>123</span>
</div>
注意:如果去掉上面例子的代码中// foo: props => createElement('span', '789')
的注释,则slot="foo"
插槽中显示内容依然为<span>789</span>
。
** refInFor:**如果你在渲染函数中给多个元素都应用了相同的 ref
名,那么 `$refs.myRef`
会变成一个数组。
(3)子级虚拟节点 (VNodes)。如果传入的是VNode则要用列Array传入,另外也可以使用字符串来生成“文本虚拟节点”。可选。
3.函数式组件
函数式组件相比于一般的vue组件而言,最大的区别是非响应式的。它不会监听任何数据,也没有实例(因此没有状态,意味着不存在诸如created,mounted的生命周期)。好处是因只是函数,故渲染开销也低很多。
把开头的例子改成函数式组件,代码如下:
<script>
export default {name:'anchor-header',functional:true, // 以functional:true声明该组件为函数式组件props:{level:Number,name:String,content:String},// 对于函数式组件,render函数会额外传入一个context参数用来表示上下文,即替代this。函数式组件没有实例,故不存在thisrender:function(createElement,context){ const anchor={props:{content:String,name:String},template:'<a :id="name" :href="`#${name}`"> {{content}}</a>'}const anchorEl=createElement(anchor,{props:{content:context.props.content, //通过context.props调用props传入的变量name:context.props.name}})const el=createElement(`h${context.props.level}`,[anchorEl])return el}
}
</script>
渲染函数 & JSX — Vue.js:更多关于函数式组件内容请看官网函数式组件
4.element-ui的el-row组件
最后以el-row组件的源码来分析,该源码的渲染逻辑在render
函数上,非常简洁明了:
export default {name: 'ElRow',componentName: 'ElRow',props: {tag: {type: String,default: 'div'},gutter: Number,type: String,justify: {type: String,default: 'start'},align: {type: String,default: 'top'}},computed: {style() {const ret = {};if (this.gutter) {ret.marginLeft = `-${this.gutter / 2}px`;ret.marginRight = ret.marginLeft;}return ret;}},render(h) {return h(this.tag, {class: ['el-row',this.justify !== 'start' ? `is-justify-${this.justify}` : '',this.align !== 'top' ? `is-align-${this.align}` : '',{ 'el-row--flex': this.type === 'flex' }],style: this.style}, this.$slots.default);}
};
对着el-row组件传入参数的说明图来解释:
直接从render
函数处进行分析,
1.传入第一个参数为this.tag
,用于根据参数生成对应的html标签。
2.第二个参数中传入class
和style
是根据props
中的type
,gutter
,justify
,align
生成的。
3.第三个参数传入子节点。此处通过this.$slots.default
拿到传入的子节点。例如:
<el-row><div>123</div>
</el-row>
此时,this.$slots.default 获取的数据则是一个包含上面<div>123</div>
的VNode的数组。
以下内容来自官网:
拓展:slots() 和 children 对比
你可能想知道为什么同时需要 slots()
和 children
。slots().default
不是和 children
类似的吗?在一些场景中,是这样——但如果是如下的带有子节点的函数式组件呢?
<my-functional-component><p v-slot:foo>first</p><p>second</p>
</my-functional-component>
对于这个组件,children
会给你两个段落标签,而 slots().default
只会传递第二个匿名段落标签,slots().foo
会传递第一个具名段落标签。同时拥有 children
和 slots()
,因此你可以选择让组件感知某个插槽机制,还是简单地通过传递 children
,移交给其它组件去处理。
相关文章:

Vue | Vue深入浅出——Vue中的render函数详解
1.render函数 在编写vue单文件的大多数情况下,我们都是使用template模板来创建HTML。然而在一些条件判断比较复杂的场景下,使用JavaScript去描绘HTML的生成逻辑会显得更加的简洁直观。 使用Vue官网的例子来简单说明: 如果自己在开发的时候…...
数学基础 -- 线性代数之奇异值
奇异值与其应用 1. 奇异值定义 对于任意的矩阵 A A A(可以是方阵或非方阵),存在三个矩阵 U U U、 Σ \Sigma Σ 和 V V V,使得: A U Σ V T A U \Sigma V^T AUΣVT 其中: U U U 是一个 m m m \ti…...

Python爬虫使用实例-wallpaper
1/ 排雷避坑 🥝 中文乱码问题 print(requests.get(urlurl,headersheaders).text)出现中文乱码 原因分析: <meta charset"gbk" />解决方法: 法一: response requests.get(urlurl,headersheaders) response.en…...
探索Go语言中的随机数生成、矩阵运算与数独验证
1. Go中的随机数生成 在许多编程任务中,随机数的生成是不可或缺的。Go语言通过 math/rand 包提供了伪随机数生成方式。伪随机数由种子(seed)决定,如果种子相同,生成的数列也会相同。为了确保每次程序运行时产生不同的随机数,我们…...

无线安全(WiFi)
免责声明:本文仅做分享!!! 目录 WEP简介 WPA简介 安全类型 密钥交换 PMK PTK 4次握手 WPA攻击原理 网卡选购 攻击姿态 1-暴力破解 脚本工具 字典 2-Airgeddon 破解 3-KRACK漏洞 4-Rough AP 攻击 5-wifi钓鱼 6-wifite 其他 WEP简介 WEP是WiredEquivalentPri…...
牛客练习赛128:Cidoai的平均数对(背包dp)
题目描述 给定 nnn 对数 (ai,bi)(a_i,b_i)(ai,bi) 和参数 kkk,你需要选出一些对使得在满足 bib_ibi 的平均值不超过 kkk 的同时,aia_iai 的和最大,求出这个最大值。 输入描述: 第一行两个整数分别表示 n,kn,kn,k。 接下来 nnn 行&…...
Python世界:简易地址簿增删查改算法实践
Python世界:简易地址簿增删查改算法实践 任务背景编码思路代码实现本文小结 任务背景 该任务来自简明Python教程中迈出下一步一章的问题: 编写一款你自己的命令行地址簿程序, 你可以用它浏览、 添加、 编辑、 删除或搜索你的联系人ÿ…...

网络安全-intigriti-0422-XSS-Challenge Write-up
目录 一、环境 二、解题 2.1看源码 一、环境 Intigriti April Challenge 二、解题 要求:弹出域名就算成功 2.1看源码 我们看到marge方法,肯定是原型链污染题目 接的是传参,我们可控的点在于qs.config和qs.settings,这两个可…...
Debian Linux 11 使用crash
文章目录 前言一、环境安装1.1 安装debug package1.2 安装crash 二、使用crash 前言 # cat /etc/os-release PRETTY_NAME"Debian GNU/Linux 11 (bullseye)" NAME"Debian GNU/Linux" VERSION_ID"11" VERSION"11 (bullseye)" VERSION_C…...
python列表 — 按顺序找出b表中比a表多出的元素
目录 一、功能描述 二、适用场景 三、代码实现 一、功能描述 有a、b两个列表,a列表有3个元素;b列表有7个元素。b列表多出的一个元素可能在随机的位置,在不影响其他元素的情况下,找到b列表多出的那四个元素,并按照在…...

如何使用Python创建目录或文件路径列表
在 Python 中,创建目录或生成文件路径列表通常涉及使用 os、os.path 或 pathlib 模块。下面是一些常见的任务和方法,用于在 Python 中创建目录或获取文件路径列表。 问题背景 在初始阶段的 Python 学习过程中,可能遇到这样的问题:…...

领夹麦克风哪个品牌好,哪种领夹麦性价比高,无线麦克风推荐
在音频录制需求日益多样化的今天,无线领夹麦克风作为提升音质的关键设备,其重要性不言而喻。市场上鱼龙混杂,假冒伪劣、以次充好的现象屡见不鲜。这些产品往往以低价吸引消费者,却在音质、稳定性、耐用性等方面大打折扣࿰…...
苍穹外卖学习笔记(五)
文章目录 二.新增菜品1.图片上传2.具体新增菜品 二.新增菜品 1.图片上传 这里采用了阿里云oss对象存储服务 application.yml alioss:endpoint: ${sky.alioss.endpoint}access-key-id: ${sky.alioss.access-key-id}access-key-secret: ${sky.alioss.access-key-secret}bucket…...
什么是卷积层、池化层、BN层,有什么作用?
什么是卷积层、池化层、BN层,有什么作用? 卷积层池化层BN层 卷积层 定义: 卷积层是CNN中的核心组件,它通过卷积运算对输入数据进行特征提取。卷积层由多个卷积单元组成,每个卷积单元的参数通过反向传播算法优化得到。…...
[学习笔记]《CSAPP》深入理解计算机系统 - Chapter 4 处理器体系结构Chapter 5 优化程序性能
总结一些第四章和第五章的一些关键信息 Chapter 4 处理器体系结构将处理组织成阶段 Chapter 5 优化程序性能 Chapter 4 处理器体系结构 在硬件中,寄存器直接将它的输入和输出线连接到电路的其他盆。 在机器级变成中,寄存器代表的是 CPU 中为数不多的可寻…...
案例分享|我是这样转型做数据产品经理的?
本文为才聚学员投稿的原创作品,现在才聚正面向专业项目管理者征集“项目管理实战案例”原创文章,被采纳即可获得丰厚稿酬,欢迎大家关注公众号踊跃投稿。 如您有意向投稿,可将稿件投递给我们。 故事介绍 三段故事,讲…...

ffmpeg面向对象-rtsp拉流相关对象
目录 1.AVFormatContext和FFFormatContext类。1.1 概述1.2 构造函数1.3 oopc的继承实现 2. AVInputFormat 类。2.1 多态的实现 3.所用设计模式3.1模板模式3.2 工厂模式? 3.3 rtsp拉流建链 4.this指针5.小结6.rtsp拉流流程 1.AVFormatContext和FFFormatContext类。 …...
feign client发送Post请求,发送对象参数,服务端接收不到正确参数报错排查
记一次feignclient发送请求服务端接收不到正确参数排查 服务端代码: Operation(summary "Create team")PostMapping("post")RequiresPermissions("team:add")public RestResponse addTeam(Valid Team team) {this.teamService.crea…...

Hadoop林子雨安装
文章目录 hadoop安装教程注意事项: hadoop安装教程 链接: 安装教程 注意事项: 可以先安装ububtu增强功能,完成共享粘贴板和共享文件夹 ubuntu增强功能 2.这里就可以使用共享文件夹 或者在虚拟机浏览器,用 微信文件传输助手 传文…...

Springboot项目总结
1.为了调用写在其他包里面的类的方法 但是不使用new来实现调用这个类里面的方法,这个时候我们就需要将这个类注入到ioc容器里面,通过ioc容器来实现自动生成一个对象。 对ioc容器的理解:自动将一个对象实现new. 考察了and 和 or组合使用&…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...

OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...