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>
1
2
3
4
5
6
7
8
9
10
11
12

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>;
     }
1
2
3
4
5
6
7
8
9
10

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>
1
2
3
4
5
6
7
8
9
10
11
12

3.函数式编写风格

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

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

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

转换函数式为：

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

二、函数式编程

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()
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
<Btn type="success">编辑Btn>
  <Btn type="error">删除Btn>
template>
1
2
3
4

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)
        })()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

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

---

总结

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