vue3组件化开发页面之渲染函数实现

文章目录

  • 前言
  • 一、渲染机制
    • 虚拟 DOM
    • 渲染管线
  • 二、渲染函数
    • 基本用法
    • 声明渲染函数
    • Vnodes 必须唯一
  • 三、页面使用渲染函数及组件配置
  • 总结
    • `如有启发,可点赞收藏哟~`


前言

组件化开发是目前开发的常态
本文记录页面拆分多个不同组件模块,然后再基于渲染函数实现页面的开发过程


一、渲染机制

由于渲染函数是基于虚拟DOM实现的,咱先简单了解渲染函数的背景

虚拟 DOM

虚拟 DOM (Virtual DOM,简称 VDOM) 是一种编程概念,意为将目标所需的 UI 通过数据结构“虚拟”地表示出来,保存在内存中,然后将真实的 DOM 与之保持同步。这个概念是由 React 率先开拓,随后被许多不同的框架采用,当然也包括 Vue。

与其说虚拟 DOM 是一种具体的技术,不如说是一种模式,所以并没有一个标准的实现。例如以下代码为纯 JavaScript 的对象 (一个“虚拟节点”),它代表着一个 <div> 元素

const vnode = {type: 'div',props: {id: 'hello'},children: [/* 更多 vnode */]
}

渲染管线

  • 编译:Vue 模板被编译为渲染函数:即用来返回虚拟 DOM 树的函数。这一步骤可以通过构建步骤提前完成,也可以通过使用运行时编译器即时完成。

  • 挂载:运行时渲染器调用渲染函数,遍历返回的虚拟 DOM 树,并基于它创建实际的 DOM 节点。这一步会作为响应式副作用执行,因此它会追踪其中所用到的所有响应式依赖。

  • 更新:当一个依赖发生变化后,副作用会重新运行,这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器遍历这棵新树,将它与旧树进行比较,然后将必要的更新应用到真实 DOM 上去。

结合上文可以看出,如果使用渲染函数会比 使用Vue模版渲染更快,因为少了一个编译的步骤

二、渲染函数

在绝大多数情况下,Vue 推荐使用模板语法来创建应用。然而在某些使用场景下,我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。

基本用法

h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode(),但当你需要多次使用渲染函数时,一个简短的名字会更省力。

  • 创建 Vnodes
  • Vue 提供了一个 h() 函数用于创建 vnodes:
import { h } from 'vue'const vnode = h('div', // type{ id: 'foo', class: 'bar' }, // props[/* children */]
)
// 除了类型必填以外,其他的参数都是可选的
h('div')
h('div', { id: 'foo' })// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])

声明渲染函数

可以使用 render 选项来声明渲染函数:

import { h } from 'vue'export default {data() {return {msg: 'hello'}},render() {return h('div', this.msg)}
}

除了返回一个单独的 vnode 之外,你还可以返回字符串或是数组:

export default {render() {return 'hello world!'}
}
import { h } from 'vue'export default {render() {// 用数组来返回多个根节点return [h('div'),h('div'),h('div')]}
}

Vnodes 必须唯一

组件树中的 vnodes 必须是唯一的。

如果你真的非常想在页面上渲染多个重复的元素或者组件,你可以使用一个工厂函数来做这件事。比如下面的这个渲染函数就可以完美渲染出 20 个相同的段落:

function render() {return h('div',Array.from({ length: 20 }).map(() => {return h('p', 'hi')}))
}

三、页面使用渲染函数及组件配置

把一个页面拆分多个组件模块,以组装形式依次生成
可以使用Wrapper 组件包装下,处理多个路由通用逻辑

  • wrapper/index.vue
<template><slot></slot>
</template><script lang="ts" src="./index.ts" /><style lang="less" scoped></style>
  • user-sreach/index.vue
<template><div>user sreach</div>
</template><style scoped lang="less"></style>
  • user-list/index.vue
<template><div>user list</div>
</template><style scoped lang="less"></style>
  • /user/index.ts
import { ROUTER_CONFIG_MAP } from '@/const/router';
import { defineComponent, h, defineAsyncComponent, type Component } from 'vue';const Wrapper = defineAsyncComponent(() => import('@/components-business/wrapper/index.vue'));
const UserSreach = defineAsyncComponent(() => import('@/components-business/form/user-sreach/index.vue'));
const UserList = defineAsyncComponent(() => import('@/components-business/table/user-list/index.vue'));const componentsMap: Types.KeyMapAny<Component> = {UserSreach,UserList
};const pageComponent = ['UserSreach','UserList'
]
export default defineComponent({// 配置后可在 动态获取路由配置中设置对应值name: ROUTER_CONFIG_MAP.system.user.name,title: ROUTER_CONFIG_MAP.system.user.title,path: ROUTER_CONFIG_MAP.system.user.path,setup() {// return () => pageComponent.map((item: string) => componentsMap[item] ? h(componentsMap[item]) : null);return () => h(Wrapper,null,() => pageComponent.map((item: string) => componentsMap[item] ? h(componentsMap[item]) : null));},
});
  • router/index.ts
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/",name: "Home",component: () => import('@/views/contents-pages/system/user/index'),},],
});export default router;

在这里插入图片描述


总结

如有启发,可点赞收藏哟~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/159031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[MICROSAR Adaptive] --- Persistency

1 persistency 概念介绍 percistency持久化,上一集我们介绍过 从一个应用程序的角度来看 它能使用的API可以分为三类,ara::per的API就属于这里的第二类direct API,只需要编译链接相应的库就可以直接使用了。我们先来了解ara::per的主要功能,ara::per提供持久化存储相关的,…

最新AIGC创作系统ChatGPT网站源码,Midjourney绘画系统,支持最新GPT-4-Turbo模型,支持DALL-E3文生图

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

Django自动生成docs接口文档

1.创建Django项目 python manage.py startproject django20252.创建子应用 python manage.py startapp api3.安装依赖包 pip install coreapi4.创建urls.py from django.contrib import admin from django.urls import path, include from rest_framework import routers f…

云南旅游攻略思维导图

马上就要2024年春节了&#xff0c;相信小伙伴们都蠢蠢欲动了&#xff0c;春节去哪里玩&#xff1f;今天小P来给大家分享云南旅游攻略了&#xff0c;希望可以对大家有所帮助。 为什么要来云南呢&#xff1f;因为云南的绝大多数地方&#xff0c;一年四季总是那样温暖&#xff1b;…

渗透测试高级技巧(一):分析验签与前端加密

“开局一个登录框” 在黑盒的安全测试的工作开始的时候&#xff0c;打开网站一般来说可能仅仅是一个登录框&#xff1b;很多时候这种系统往往都是自研或者一些业务公司专门研发。最基础的情况下&#xff0c;我们会尝试使用 SQL 注入绕过或者爆破之类的常规手段&#xff0c;如果…

头插法尾插法建立单链表

头插法建立单链表 #define NULL 0 #include<stdio.h>typedef struct LNode {int data;struct LNode *next; }LNode,*LinkList;//单链表尾插法 LinkList List_TailInsert(LinkList &L){int x;L (LinkList)malloc(sizeof(LNode)); //初始化空表LNode *r L; …

如何在Linux以docker-compose方式快速部署运行StackEdit,并实现公网访问

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…

52.seata分布式事务

目录 1.事务的四大特性。 2.分布式服务的事务问题。 3.seata。 3.1理论基础。 3.1.1CAP定理。 3.1.2BASE理论。 3.2初识Seata。 3.2.1Seata的架构。 3.2.2部署TC服务。 3.2.3微服务集成Seata。 3.3 seata提供的四种分布式事务解决方案。 3.3.1 XA模式。 3.3.1.1 X…

005 OpenCV直方图

目录 一、环境 二、直方图原理概述 三、代码 一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、直方图原理概述 OpenCV是一个广泛使用的开源计算机视觉库&#xff0c;它提供了许多用于图像处理和分析的函数和算法。其中&#xff…

分享-Spss下载含spss25.spss26.spss27等版本

为了学习spss买的&#xff0c;分享安装程序给大家 SPSS 27是一款用于统计分析和数据挖掘的软件&#xff0c;以下是SPSS 27的功能介绍和配置建议&#xff1a; 功能介绍&#xff1a; 数据管理&#xff1a;SPSS 27可以对数据进行管理和清洗&#xff0c;包括数据输入、缺失值处理…

微软和 OpenAI 的桥段,30 年前的数据库圈也上演过

历史不会重复, 却压着相同的韵脚。 这是一段发生在 30 年前的历史&#xff0c;也是在当时最热的技术领域-数据库&#xff0c;主角之一同样是微软。 论白嫖收购&#xff0c;微软一直是行业内的佼佼者&#xff08;虽然也发生过收购诺基亚这样的翻车事故&#xff09;。这也是它基…

自动化测试 —— 元素定位

1.什么是自动化测试 自动化测试的概念:软件自动化测试就是通过测试工具或者其他手段&#xff0c;按照测试人员的预定计划对软件产品进行自动化测试&#xff0c;他是软件测试的一个重要组成部分&#xff0c;能够完成许多手工测试无法完成或者难以实现的测试工作&#xff0c;正确…

9.2 Windows驱动开发:内核解析PE结构导出表

在笔者的上一篇文章《内核特征码扫描PE代码段》中LyShark带大家通过封装好的LySharkToolsUtilKernelBase函数实现了动态获取内核模块基址&#xff0c;并通过ntimage.h头文件中提供的系列函数解析了指定内核模块的PE节表参数&#xff0c;本章将继续延申这个话题&#xff0c;实现…

如何用CHAT写励志文章?

问CHAT&#xff1a;写一篇以《过了60岁要积极面对身体疾病的坎儿》为题目&#xff0c;写一篇300字励志文章 CHAT回复&#xff1a; 标题&#xff1a;《过了60岁要积极面对身体疾病的坎儿》 人生&#xff0c;有时会像一趟不期而遇的旅程&#xff0c;各自带着乐观或悲观、阳光或…

(论文阅读51-57)图像描述3 53

51.文献阅读笔记&#xff08;KNN&#xff09; 简介 题目 Exploring Nearest Neighbor Approaches for Image Captioning 作者 Jacob Devlin, Saurabh Gupta, Ross Girshick, Margaret Mitchell, C. Lawrence Zitnick, arXiv:1505.04467 原文链接 http://arxiv.org/pdf/1…

如何使用无代码系统搭建软件平台?有哪些开源无代码开发平台?

无代码是什么 无代码开发&#xff0c;也称为零代码&#xff08;Zero Code&#xff09;开发&#xff0c;是一种技术概念。无代码开发无需代码基础&#xff0c;适合业务人员、IT开发及其他各类人员使用。他们通过无代码开发平台快速构建应用&#xff0c;并适应各种需求变化&#…

深入理解Java虚拟机-GC

深入理解Java虚拟机-GC 当需要排查各种内存溢出、内存泄漏时&#xff0c;当垃圾回收成为系统到达更高并发量的瓶颈时&#xff0c;我们必须对内存动态分配和内存回收技术这样的“自动化”技术采用必要的监控和调节。 Java堆和方法区&#xff1a;一个接口的多个实现类需要的内存…

element表格头部加入图标

首先看看效果 下面是代码 <el-table-column prop"integralBalance"><template slot"header" slot-scope"scope"><div style"display: flex;justify-content: center;align-items: center;">积分余额<i class&qu…

创建 Springboot 项目

前言 创建 Spring Boot 项目是很多Java开发人员入门的重要一步&#xff01; 欢迎来到本篇关于创建 Spring Boot 项目的博客&#xff01;Spring Boot作为一个快速、便捷的开发框架&#xff0c;为我们提供了简化和加速应用程序开发的利器。 在这个数字化时代&#xff0c;快速响…

C语言从入门到实战——数组和指针的强化练习题

数组和指针的强化练习题 前言1. sizeof和strlen的对比1.1 sizeof1.2 strlen1.3 sizeof和strlen的对⽐ 2. 数组和指针笔试题解析2.1 一维数组2.2 字符数组2.3 二维数组 3. 指针运算笔试题解析3.1 题目1&#xff1a;3.2 题目23.3 题目33.4 题目43.5 题目53.6 题目63.7 题目7 前言…