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函数的简单实用。