当前位置: 首页 > 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,张三…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...