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