当前位置: 首页 > news >正文

Vue3函数式编程


文章目录

  • 前言
  • 一、三种编程风格
    • 1.template
    • 2.jsx/tsx
    • 3.函数式编写风格
  • 二、函数式编程
    • 1.使用场景
    • 2.参数
    • 3.例子
    • 3.render渲染函数
  • 总结


前言

本文主要记录vue3中的函数式编程以及其他编程风格的简介


一、三种编程风格

1.template

Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
也就是HTML的书写方式。

 <template><div><template v-if="reverse"><div class="bar">Bar DOM...</div><div class="foo">Foo DOM...</div></template><template v-else><div class="foo">Foo DOM...</div><div class="bar">Bar DOM...</div></template></div></template>

2.jsx/tsx

这是一种DOM标签和JS混用的方式,对DOM操作更加灵活,发挥出JS的完全编程能力,但是需要手动实现渲染优化,Vue在模板语法中做的优化在此方式中不适用
如:根据 props 上的 reverse 属性,来决定是否要调换两块内容的渲染顺序。

jsx:

const renderContent = () => {const Content = [<div class="foo">Foo DOM...</div>,<div class="bar">Bar DOM...</div>,];if (props.reverse) {Content.reverse();}return <div>{Content}</div>;}

template:

<template><div><template v-if="reverse"><div class="bar">Bar DOM...</div><div class="foo">Foo DOM...</div></template><template v-else><div class="foo">Foo DOM...</div><div class="bar">Bar DOM...</div></template></div></template>

3.函数式编写风格

vue中提供了h函数,h 函数是一个重载函数,支持多种调用方式,但在内部会处理为符合 createVNode 函数的入参,然后交给 createVNode 来创建虚拟 DOM。在此可以利用vue3提供的render函数将此虚拟DOM创建成真实DOM并挂载到指定结点。
可以直接跳过模板的编译过程

parser函数 -> ast抽象语法树 -> transform -> js 可描述api -> generate生成 -> render

<div><span>1</span></div>

转换函数式为:

let render = () =>{return h('div),{},[h('span),{},'1']}

二、函数式编程

1.使用场景

封装一些小组件(弹窗、按钮等)

2.参数

h 函数有三个参数

  • 第一个是创建的结点
  • 第二个是节点属性
  • 第三个是节点内容

3.例子

代码如下(示例):

interface Props {type: 'success' | 'error'
}
const Btn = (props:Props,ctx:any) =>{return h('button',{style: {color:props.type === 'success'? 'green': 'red'},onClick:()=>{ctx.emit('click','smz')console.log('点击了按钮',props.type)}},ctx.slots.default())
}
<template>
<Btn type="success">编辑</Btn><Btn type="error">删除</Btn>
</template>

3.render渲染函数

该函数由vue内部提供,可以将标签或者虚拟DOM转换成真实DOM并挂载到指定结点
该函数接收两个参数:

  • 标签或虚拟dom
    当该参数为null时,会将此组件移除
  • 挂载结点

例子:(提示组件)

export const message = (message, duration = 2000) =>{const handleDestroy = () =>{render(null,document.body)}const vNode = h('messageComponent',{style:{width: '200px',height: '100px',border: '2px solid',float: 'left',position: 'relative',left: '50%','margin-left': '-50px'},message,duration,destroy:handleDestroy},message)render(vNode,document.body);(function () {setTimeout(()=>render(null,document.body),duration)})()
}

使用:直接以API的形式调用

const messages = () =>{message('这是一个提示窗')
}

弹窗提示


总结

以上就是三种编码风格以及vue3中h函数和render函数的简单实用。

相关文章:

Vue3函数式编程

文章目录 前言一、三种编程风格1.template2.jsx/tsx3.函数式编写风格 二、函数式编程1.使用场景2.参数3.例子3.render渲染函数 总结 前言 本文主要记录vue3中的函数式编程以及其他编程风格的简介 一、三种编程风格 1.template Vue 使用一种基于 HTML 的模板语法&#xff0c;…...

【逗老师的无线电】艾德克斯TTL串口转网口

最近手搓了一个可以用于艾德克斯ITECH电源或者电子负载的TTL串口转网口的模块&#xff0c;用上之后&#xff0c;上位机软件就可以配置以太网IP连接设备啦。就像这样。 一、ITECH TTL接口定义 二、整体逻辑 嗯&#xff0c;就这么简单。IT9000控制软件的Ethernet功能就是直接S…...

如何修改jupyter notebook默认打开路径

1、用jupyter notebook在其他位置打开自己的ipython项目&#xff1a; jupyter notebook是一个很好用的工具&#xff0c;可以保存运行结果&#xff0c;还可以给项目添加很多可视化操作与介绍文字。安装anaconda后&#xff0c;jupyter notebook就会自动安装&#xff0c;点开它会…...

【leetcode】数组排序

【leetcode】数组排序 task03 主要了解了数组中常见的排序方法&#xff1a; 1.常见数组排序方法 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff1a; 冒泡排序是一种简单的排序算法&#xff0c;它多次遍历数组&#xff0c;比较相邻的元素并交换它们&#xff0c;直到整…...

【C刷题训练营】第四讲(打好基础很重要)

前言: 大家好&#xff0c;这是c语言刷题训练营的第四讲&#xff0c;打好基础便于对c语言语法与算法思维的提高&#xff0c;感谢你的来访与支持&#xff01; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨刷题专栏…...

MySQL 某个字段存储不了内容

1. 原因 某个字段存储的内容过大 2. 解决 修改max_allowed_packet参数 max_allowed_packet参数是指mysql服务器端在一次传送数据包的过程当中最大允许的数据包大小。如果超过了设置的最大长度&#xff0c;则会数据库保持数据失败。 2.1 查询参数 show variables like %max…...

7.代理模式

1.UML 2.代码 #include <iostream> using namespace std;class Subject{ public:virtual void Request() 0; };class RealSubject:public Subject { public:virtual void Request(){cout << "RealSubject" << endl;} }; class Proxy:public Subj…...

单例模式的安全写法

要想知道怎么写单例模式&#xff0c;那么必须得知道什么是单例模式。单例模式是一种设计模式&#xff0c;它确保某个类只有一个实例&#xff0c;并且提供一个全局访问该实例的方法。单例模式不会创建实例副本&#xff0c;而是返回对已创建实例的引用。单例模式的创建可以分为两…...

牛客网SQL156

各个视频的平均完播率_牛客题霸_牛客网 方法一 select a.video_id,format(count(b.video_id)/count(a.video_id),3) 完播率 from (select uid,video_id,(end_time-start_time) 播放时长from tb_user_video_logwhere year(start_time)2021 or year(end_time)2021 ) a left joi…...

【MongoDB】docker部署社区版(一)

0、背景介绍 项目中使用MongoDB了&#xff0c;服务器挂掉&#xff0c;自己在本地搭一个试试。 1、版本选择 首先有社区版和和商业版。我选的是社区版。链接&#xff1a;https://hub.docker.com/r/mongodb/mongodb-community-server/tags 1.1、标签选择 看到标签有两个大类…...

【Graph Net学习】GNN/GCN代码实战

一、简介 GNN&#xff08;Graph Neural Network&#xff09;和GCN&#xff08;Graph Convolutional Network&#xff09;都是基于图结构的神经网络模型。本文目标就是打代码基础&#xff0c;未用PyG&#xff0c;来扒一扒Graph Net两个基础算法的原理。直接上代码。 二、代码 …...

RocketMQ 发送顺序消息

文章目录 顺序消息应用场景消息组&#xff08;MessageGroup&#xff09;顺序性生产的顺序性MQ 存储的顺序性消费的顺序性 rocketmq-client-java 示例&#xff08;gRPC 协议&#xff09;1. 创建 FIFO 主题生产者代码消费者代码解决办法解决后执行结果 rocketmq-client 示例&…...

【面试经典150 | 双指针】判断子序列

文章目录 写在前面Tag题目来源题目解题解题思路方法一&#xff1a;双指针方法二&#xff1a;动态规划 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对…...

自动驾驶信息安全方案

目录 1. 修订历史... 3 2. 概述... 4 2.1 目的... 4 2.2 适用范围... 4 2.3 参考文档... 4 2.4 术语和缩写... 4 3. 安全分析... 5 4. 总体设计... 6 4.1 ACU的安全防护... 7 4.1.1 系统安全引导... 7 4.1.2 密钥安全存储... 8 4.1.3 应…...

【云原生】kubernetes中pod(最小的资源管理组件)

目录 前言 一、pod 1.1pause容器使得Pod中的所有容器可以共享两种资源&#xff1a; 1.2 通常把Pod分为两类 1.2.1自主式Pod 1.2.2控制器管理的Pod 1.3 Pod 容器的分类 1.3.1基础容器&#xff08;infrastructure container&#xff09; 1.3.2初始化容器&#xff08;initc…...

[DB]数据库--lowdb

[DB]数据库--lowdb lowdb基本应用获取数据数据变更写入文件 lodash的使用获取数据lodash方法使用数据变更写入文件 lowdb lowdb ,是一个基于文件存储的非关系型数据库 基于loadsh的轻量级数据库 可用于在json中存储数据&#xff0c;大小一般为0~200M的json文件 方便简单的数…...

Kotlin | 在for、forEach循环中正确的使用break、continue

文章目录 for循环中使用break、continueLabel标签forEach中如何退出循环资料 Kotlin 有三种结构化跳转表达式&#xff1a; return&#xff1a;默认从最直接包围它的函数或者匿名函数返回。break&#xff1a;终止最直接包围它的循环。continue&#xff1a;继续下一次最直接包围…...

【C++】详解std::mutex

2023年9月11日&#xff0c;周一中午开始 2023年9月11日&#xff0c;周一晚上23&#xff1a;25写完 目录 概述头文件std::mutex类的成员类型方法没有std::mutex会产生什么问题问题一&#xff1a;数据竞争问题二&#xff1a;不一致lock和unlock死锁 概述 std::mutex是C标准库中…...

Matlab图像处理-Lab模型

Lab模型 Lab模型是由CIE&#xff08;国际照明委员会&#xff09;制定的一种彩色模型。该模型与设备无关&#xff0c;弥补了RGB模型和CMYK模型必须依赖于设备颜色特性的不足&#xff1b; 另外&#xff0c;自然界中的任何颜色都可以在Lab空间中表现出来&#xff0c;也就是说RGB和…...

分布式ETL工具Sqoop实践

Mysql数据准备 1、在node02节点登录Mysql。 mysql -uroot -proot2、新建数据库testdb。 create database testdb;3、新建数据表ts。 use testdb; create table ts(id int, name varchar(10), age int, sex char(1));4、向表中插入数据。 insert into ts values(10001,张三…...

展会预告 | 图扑邀您共聚 IOTE 国际物联网展·深圳站

参展时间&#xff1a;9 月 20 日- 22 日 图扑展位&#xff1a;9 号馆 9B 35-1 参展地址&#xff1a;深圳国际会展中心&#xff08;宝安新馆&#xff09; IOTE 2023 第二十届国际物联网展深圳站&#xff0c;将于 9 月 20 日- 22 日在深圳国际会展中心&#xff08;宝安&#xf…...

如何下载安装 WampServer 并结合 cpolar 内网穿透,轻松实现对本地服务的公网访问

文章目录 前言1.WampServer下载安装2.WampServer启动3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 Wamp 是一个 Windows系统下的 Apache PHP Mysql 集成安装环境&#xff0c;是一组常用来…...

iOS添加Mapbox地图库

配置凭据 注册并导航到Account页面。你将需要&#xff1a; 公共访问令牌&#xff1a; 从帐户的tokens页面&#xff0c;你可以复制默认的公共令牌或单击"create a token"按钮来创建新的公共令牌。 带有Downloads:Read范围的秘密访问令牌&#xff1a; 从你帐户的t…...

destoon根据目录下的html文件生成地图索引

因为项目需要&#xff0c;destoon根据目录下的html文件生成地图索引&#xff0c;操作方法&#xff0c;代码如下&#xff1a; <?php $new_array array(); function loopDir($dir,&$new_array,$modurl) {$handle opendir($dir);header("Content-Type:text/xml&qu…...

gRPC之gRPC流

1、gRPC流 从其名称可以理解&#xff0c;流就是持续不断的传输。有一些业务场景请求或者响应的数据量比较大&#xff0c;不适合使用普通的 RPC 调用通过一次请求-响应处理&#xff0c;一方面是考虑数据量大对请求响应时间的影响&#xff0c;另一方面业务场景的设计不一 定需…...

Kafka Shell命令交互

Kafka提供了一个命令行工具,用于管理和与Kafka集群交互。这个命令行工具通常称为Kafka Shell,它允许您执行各种操作,如创建主题、发送和消费消息、查看主题列表等。 以下是一些常用的Kafka Shell命令: 创建主题(Topic): kafka-topics.sh --create --topic my-topic --pa…...

什么是回归测试?

什么是回归测试&#xff1f; 回归测试被定义为一种软件测试类型&#xff0c;以确认最近的程序或代码更改未对现有功能产生不利影响。 回归测试只不过是全部或部分选择已执行的测试用例&#xff0c;然后重新执行以确保现有功能正常运行。 进行此测试是为了确保新代码更改不会…...

ZTMap是如何在相关政策引导下让建筑更加智慧化的?

近几年随着智慧楼宇概念的深入&#xff0c;尤其是在“十四五规划”“新基建”“数字经济”等相关战略和政策的引导下&#xff0c;智慧楼宇也迎来了快速发展期&#xff0c;对推动智慧城市系统的建设越来越重要。那么究竟什么是智慧楼宇呢&#xff1f;智慧楼宇其实就是整合楼宇内…...

Python:函数和代码复用

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ python源码、视频教程、插件安装教程、资料我都准备好了&#xff0c;直接在文末名片自取就可 1、关于递归函…...

three.js——模型对象的使用材质和方法

模型对象的使用材质和方法 前言效果图1、旋转、缩放、平移&#xff0c;居中的使用1.1 旋转rotation&#xff08;.rotateX()、.rotateY()、.rotateZ()&#xff09;1.2缩放.scale()1.3平移.translate()1.4居中.center() 2、材质属性.wireframe 前言 BufferGeometry通过.scale()、…...

阳江网签/百度seo如何优化

前面简单地了解了一下IdleStateHandler&#xff0c;我们现在写一个简单的心跳demo&#xff1a; 1&#xff09;服务器端每隔5秒检测服务器端的读超时&#xff0c;如果5秒没有接受到客户端的写请求&#xff0c;也就说服务器端5秒没有收到读事件&#xff0c;则视为一次超时 2&…...

做设计常用的素材网站/一个新产品策划方案

WebStorm 2019 for mac是JetBrains公司旗下一款很好用的JavaScript开发工具。&#xff0c;支持自动代码完成&#xff0c;动态代码分析&#xff0c;重构支持以及VCS集成&#xff0c;功能强大&#xff0c;被誉为最智能的JavaScript IDE。WebStorm 2019 Mac破解版最大的特点是支持…...

dedecms wap网站模板下载/全国最好网络优化公司

在使用MySQL时&#xff0c;有时需要查询出某个字段不重复的记录&#xff0c;这时可以使用mysql提供的distinct这个关键字来过滤重复的记录&#xff0c;但是实际中我们往往用distinct来返回不重复字段的条数(count(distinct id)),其原因是distinct只能返回他的目标字段&#xff…...

北京市城乡建设委员会门户网站/新品牌推广策略

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼请问一下为什么用串口来连接两台计算机,做发送与接收,可是却没反应呢?帮我看下程序,行么?发送端的clear;sserial(com2,baudrate,1200);set(s, Parity, none) ; % Set parity as noneset(s, Databits, 8) ; % set the n…...

php做网站首页/百度手机seo

在市场发展的趋势中&#xff0c;为了产生更好的视觉或者跳转的过程的必要&#xff0c;设计师都很清楚认知到在目前的APP设计和网站加载是无法避免的事了&#xff0c;所以在面对这种困难&#xff0c;必须把这种缺点一步步的变成为优点&#xff0c;打造优秀的用户体验。 目前许多…...

网站的首页页面布局怎么做/谷歌浏览器app下载安装

如图 行尾空格不能使用下划线 解决方法 点击右上角的“文件” 选择“选项” 找到常规与保存 找到兼容性选项 勾选为尾部空格添加下划线 然后确定即可...