Vue3函数式编程

---

---

前言

本文主要记录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函数的简单实用。