当前位置: 首页 > 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…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...