当前位置: 首页 > news >正文

手写Vue渲染器render函数

使用js对象来描述UI更加的灵活。“这种对象”在vue框架中被称为虚拟DOM,渲染函数内部可以创建虚拟DOM,然后vue.js可以将其内容进行渲染。

1.渲染器的介绍

渲染器的作用就是把虚拟DOM渲染为真实DOM

思考下,我们有一个虚拟 DOM,如何将它转换为真实 DOM

const vnode = {tag: 'div',props: {onClick: () => alert('hello')},children: 'click me'
}

2.实现渲染函数renderer(只考虑创建没有考虑更新逻辑情况下)

  1. 两个参数。参数vnode表示虚拟 DOM 对象,container表示一个真实 DOM 元素,作为挂载点,渲染器会把虚拟 DOM 渲染到该挂载点

  2. 使用vnode.tag作为创建的dom标签el

  3. 遍历vnode.props,将属性 事件添加到DOM上(事件即给元素添加监听事件;)

  4. 处理 children(如果 children 是字符串,说明它是元素的文本子节点用createTextNode;如果children是数组则递归调用render函数渲染子节点并挂载到el元素下)

  5. 将元素添加到挂载节点container下

<div id="app"></div><script>// 手写render函数将自己定义的vnode对象渲染到页面/*** @vnode 虚拟 DOM 对象* @container 一个真实 DOM 元素,作为挂载点,渲染器会把虚拟 DOM 渲染到该挂载点*/function render(vnode, container) {// 使用vnode.tag作为创建的dom标签ellet el = document.createElement(vnode.tag);// 遍历vnode.props,将属性 事件添加到DOM上(事件即给元素添加监听事件;)for (let key in vnode.props) {// 判断如果为事件则将其设置到el中if ((/^(on)/).test(key)) {el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key]);}}// 处理 children(字符串和数组)if (typeof vnode.children === "string") {el.appendChild(document.createTextNode(vnode.children));} else if (Array.isArray(vnode.children)) { //是数组进行遍历并递归调用render方法vnode.children.forEach(child => {render(child, el);});}// 将元素添加到挂载节点container下container.appendChild(el);}// render函数测试const container = document.getElementById('app')const vnode = {tag: 'div',props: {onClick: () => alert('hello')},// children: 'click me'children: [{tag: 'h1',props: {onClick: () => alert('h1')},children: '这是h1'},{tag: 'span',props: {onClick: () => alert('span')},children: '这是span'}]}render(vnode, container)</script>

相关文章:

手写Vue渲染器render函数

使用js对象来描述UI更加的灵活。“这种对象”在vue框架中被称为虚拟DOM&#xff0c;渲染函数内部可以创建虚拟DOM&#xff0c;然后vue.js可以将其内容进行渲染。 1.渲染器的介绍 渲染器的作用就是把虚拟DOM渲染为真实DOM 思考下&#xff0c;我们有一个虚拟 DOM&#xff0c;如…...

CGAL+QT

先安装CGAL和QT 安装完QT其中MSVC 这两个没配置 1、x32配置选择的是 x64配置选择的是 2、CGAL 5.4.5 - Manual: Using CGAL on Windows (with Visual C) 参数文章配置一些环境变量 3、 测试 新建build 进行cmake QT、Boost、CGAL都自动匹配上了&#xff08;环境变量已经配…...

GBase8a SSL 配置

GBase8a SSL 配置 GBase8a MPP Cluster 支持 SSL 标准协议&#xff0c; SSL 协议是一种安全性更高的协议标准&#xff0c; 它加入了数字签名和数字证书来实现客户端和服务器的双向身份验证&#xff0c;保证了通信双方更加安全的数据传输。 配置客户端使用 SSL 安全连接的方式连…...

数据结构之队列(源代码➕图解➕习题)

前言 在学过栈之后&#xff0c;会了解到栈的底层是根据顺序表或者链表来构建的&#xff0c;那么我们今天要学习的队列是否也是基于顺序表和链表呢&#xff1f;那我们直接进入正题吧&#xff01; 1. 队列的概念&#xff08;图解&#xff09; 还是跟上节一样&#xff0c;依旧用图…...

社区迭代|ETLCloud社区新增“论坛”啦!

ETLCloud社区是谷云科技RestCloud旗下面向开发工程师、集成研发人员等技术人员提供全方位交流和学习的开放式平台&#xff0c;也是ETLCloud在产品生态赋能上的一大亮点&#xff0c;旨在能够帮助更多的用户更快捷高效的掌握技能&#xff0c;也为企业提供集成人才培养赋能&#x…...

ohos的代码同步以及添加自己的代码

首先我们需要获取到官方的repo工具&#xff0c;命令如下curl -s https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > ./repo&#xff0c;这里我们就拿到repo工具了&#xff0c;这个repo可以放任意地方&#xff0c;也可以放 /usr/local/bin/repo下&#xff0c;这样可以…...

Python的Pandas库(二)进阶使用

Python开发实用教程 DataFrame的运算 DataFrame重载了运算符&#xff0c;支持许多的运算 算术运算 运算方法运算说明df.add(other)对应元素的加&#xff0c;如果是标量&#xff0c;就每个元素加上标量df.radd(other)等效于otherdfdf.sub(other)对应元素相减&#xff0c;如果…...

如何才能从程序员到架构师?

1 引言 小团队一般 10 人左右&#xff0c;其中常常是技术最牛的人做架构师&#xff08;或TL&#xff09;。所以&#xff0c;架构师在广大码农中的占比大概平均不到 10%。而架构师也可以分为初级、中级、高级三档&#xff0c;江湖上真正高水平的软件架构师就更少了。 所以&…...

dvadmin-打包发布-nginx-静态服务器配置-防火墙设置

文章目录 1.下载nginx2.nginx常用命令3.dvadmin打包发布4.防火墙设置 1.下载nginx 也从作者下载的网址下载&#xff1a;https://download.csdn.net/download/m0_67316550/88470098 2.nginx常用命令 注意&#xff1a;一定要在dos窗口启动&#xff0c;不要直接双击nginx.exe&a…...

Win10中Pro/E鼠标滚轮不能缩放该怎么办?

Pro/E安装好后&#xff0c;鼠标滚轮不能缩放模型&#xff0c;该怎么办&#xff1f;问题多发生在win8/win10上&#xff0c;新装了PROE&#xff0c;发现滑动鼠标中键不能放大缩小。 彩虹图纸管理软件_图纸管理系统_图纸文档管理软件系统_彩虹EDM【官网】彩虹EDM图纸管理软件系统…...

腾讯云轻量应用服务器性能如何?值得入手吗?

腾讯云轻量应用服务器性能怎么样&#xff1f;轻量服务器的CPU内存计算性能和同规格的标准型云服务器CVM性能处于同一水准&#xff0c;性能很不错&#xff0c;具有100%CPU性能&#xff0c;并且价格很优惠&#xff0c;值得买。腾讯云百科txybk.com分享腾讯云轻量应用服务器性能测…...

主流大语言模型的技术细节

主流大语言模型的技术原理细节从预训练到微调https://mp.weixin.qq.com/s/P1enjLqH-UWNy7uaIviWRA 比较 LLaMA、ChatGLM、Falcon 等大语言模型的细节&#xff1a;tokenizer、位置编码、Layer Normalization、激活函数等。2. 大语言模型的分布式训练技术&#xff1a;数据并行、…...

面试经典150题——Day22

文章目录 一、题目二、题解 一、题目 6. Zigzag Conversion The string “PAYPALISHIRING” is written in a zigzag pattern on a given number of rows like this: (you may want to display this pattern in a fixed font for better legibility) P A H N A P L S I I G …...

for循环三种跳出循环的方法(retrun、continue、break)

1、continue&#xff1a;指的是跳出当前循环&#xff0c;即不执行continue后的语句&#xff0c;直接进入下次循环。 【continue语句和break语句差不多。不同的是&#xff0c;它不是退出一个循环&#xff0c;而是跳出当前循环&#xff0c;进行下一轮循环】 public static void…...

React中的受控组件(controlled component)和非受控组件(uncontrolled component)

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

python 查找波峰和波谷

import numpy as np import matplotlib.pyplot as plt from scipy.signal import find_peaks# 生成示例信号 x np.array([1, 3, 7, 1, 2, 6, 0, 4, 3, 2, 5, 1])# 寻找波峰 peaks, _ find_peaks(x)# 寻找波谷&#xff08;使用信号的负数形式&#xff09; valleys, _ find_pe…...

深入理解 Document Load 和 Document Ready 的区别

目录 前言&#xff1a; 一、Document Ready 二、Document Load 三、理解和总结 前言&#xff1a; 在前端开发中&#xff0c;理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时&#xff0c;我们需要知道应该使用 document ready 还…...

有趣的算法(七) ——快速排序改进算法

有趣的算法&#xff08;七&#xff09; ——快速排序改进算法 目录 有趣的算法&#xff08;七&#xff09; ——快速排序改进算法 本文章向大家介绍有趣的算法&#xff08;七&#xff09; ——快速排序改进算法&#xff0c;主要内容包括其使用实例、应用技巧、基本知识点总结…...

Vue3 + Tsx 集成 ace-editor编辑器

Ace Editor介绍 Ace Editor&#xff08;全名&#xff1a;Ajax.org Cloud9 Editor&#xff09;是一个开源的代码编辑器&#xff0c;旨在提供强大的代码编辑功能&#xff0c;通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发&#xff0c;现在由开源社区维护。 主…...

TypeScritpt中的namespace

namesapce 它是在ES模块诞生前&#xff0c;ts自己发明的模块功能&#xff0c;目前已经不推荐使用了&#xff0c;namespace意为命名空间&#xff0c;就是模块化的意思。 1. 基本用法 namespace用来建立一个容器&#xff0c;内部的所有变量和函数只能在容器内部才能使用。 nam…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...