手写Vue渲染器render函数

news2024/12/16 15:50:26

使用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标签el
            let 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>

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

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

相关文章

js数组的常用方法

目录 1. 添加/删除元素 2. 查找和遍历 3. 转换 4. 排序 5. 其他 JavaScript中的数组是一种用于存储多个值的对象。数组提供了一系列的方法来进行操作&#xff0c;包括添加、删除、遍历和搜索等。下面列举了一些JavaScript数组的常用方法&#xff1a; 1. 添加/删除元素 pu…

C指针 --- 进阶

目录 1. 字符指针 1.1. 一般使用 1.2. 另一种使用 2. 指针数组 3. 数组指针 3.1. 数组指针 3.2. 数组名和&数组名 3.3. 数组指针的用处 1. 传递一个数组 2. 传递数组首元素的地址 3. 数组指针处理一维数组 4. 数组指针处理二维数组 4. 数组传参和指针传参 4.1…

PHP危险函数

PHP危险函数 文章目录 PHP危险函数PHP 代码执行函数eval 语句assert()语句preg_replace()函数正则表达式里修饰符 回调函数call_user_func()函数array_map()函数 OS命令执行函数system()函数exec()函数shell_exec()函数passthru() 函数popen 函数反引号 实列 通过构造函数可以执…

杂牌行车记录仪特殊AVI结构恢复案例

最近遇到一个杂牌的行车记录仪需要恢复数据&#xff0c;其使用AVI格式&#xff0c;但是在扫描恢复的过程中却发现厂家对其AVI结构进行了“魔改”致程序无法正常识别 故障存储:16G SD卡 fat32文件系统 故障现象: 16G的SD卡&#xff0c;在发生事故后客户尝试自行接到手机上读…

小红书素人铺量推广费用是多少?

小红书作为一个拥有庞大用户群体的社交电商平台&#xff0c;在品牌营销和产品推广方面具有巨大的潜力。其中&#xff0c;素人铺量推广作为一种常见的推广方式&#xff0c;被越来越多的品牌和商家所采用。但是&#xff0c;对于很多刚刚接触小红书推广的人来说&#xff0c;素人铺…

二维码智慧门牌管理系统升级解决方案:一级属性 二级属性

文章目录 前言一、什么是智慧门牌管理系统&#xff1f;二、一级属性 vs. 二级属性三、升级中的实践意义 前言 在本文中&#xff0c;我们将深入探讨二维码智慧门牌管理系统的升级解决方案&#xff0c;特别聚焦于一级属性和二级属性的关键概念。我们将详细解释这些概念&#xff…

如何做好建筑翻译呢

近年来&#xff0c;随着跨国工程项目增加&#xff0c;建筑翻译也越来越受到重视。尤其是建筑图纸翻译在工程设计、规划和施工等方面都具有重要意义。那么&#xff0c;如何做好建筑翻译呢&#xff0c;建筑工程翻译哪个比较正规&#xff1f; 在建筑行业日新月异的发展中&#xff…

项目进度延误,危机管理5大注意事项

项目延误危机管理的重要性是不可忽视的。项目延误可能会导致资源浪费、成本增加、客户不满、信誉受损等一系列问题&#xff0c;严重影响项目的成功与效益。因此&#xff0c;有效地进行项目延误危机管理是至关重要的&#xff0c;一般主要是从以下5个方面进行管理&#xff1a; 1、…

python yield用法

用法和ts中的差不多 def test():i[1,2,3,4]for x in i:yield x for j in test():print(j) 使用的时候就会返回一次值 实际使用中可以这样使用&#xff0c;例如我把df按照半小时进行分割&#xff0c;然后分别取处理每半小时的数据 def test():final_df[raw_timestamp] pd.t…

js使用构造函数的注意点?

目录 前言 使用构造函数的注意点 1. 使用 new 关键字 用法 代码示例 理解 2. 构造函数首字母大写 用法 代码示例 理解 3. 在构造函数中返回对象 用法 代码示例 理解 4. 使用原型链 用法 代码示例 理解 总结 前言 JavaScript 是一种基于原型的语言&#xff…

【C#】LIMS实验室信息管理系统源码

一、系统概述 LIMS(Laboratory Information Management System)即实验室信息管理系统,是通过对样品检验流程、分析数据及报告、实验室资源和客户信息等要素的综合管理,按照标准化实验室管理规范,建立符合实验室业务流程的质量体系,实现实验室信息化管理。是实验室提高分析水平…

serverSocket编程DEMO

目录 0、jar包依赖 1、ServerSocket服务端主程序&#xff1a; 2、任务执行类 3、tomcatJdbcPool&#xff1a; 4、客户端&#xff1a; 0、jar包依赖 1、ServerSocket服务端主程序&#xff1a; package socket;import java.net.ServerSocket; import java.net.Socket; impo…

python try-except捕获异常的方法

python try-except捕获异常的方法 执行过程 1、是从try下的代码块1开始执行。 2、如果有异常抛出&#xff0c;异常将被捕获&#xff0c;直接跳转并执行except下的代码块2。、如果代码块1一切正常&#xff0c;没有异常抛出&#xff0c;代码块2就不会执行。 也就是说&#xff…

大语言模型助力审计问题自动定性

国家审计作为以权力监督制约权力的一项制度安排&#xff0c;是党和国家监督体系的重要组成部分&#xff0c;是国家治理大系统中一个内生的具有预防、揭示和抵御功能的“免疫系统”&#xff0c;是国家治理的基石和重要保障&#xff0c;在推进“全面建成小康社会、全面深化改革、…

Lvs+Nginx+NDS

什么是&#xff1f;为什么&#xff1f;需要负载均衡 一个网站在创建初期&#xff0c;一般来说都是只有一台服务器对用户提供服务 ​ 从图里可以看出&#xff0c;用户经过互联网直接连接了后端服务器&#xff0c;如果这台服务器什么时候突然 GG 了&#xff0c;用户将无法访问这…

iOS安全加固方法及实现

​ 目录 iOS安全加固方法及实现 摘要 引言 iOS安全加固方法及实现 一、字符串加密 二、类名方法名混淆 三、程序代码混淆 四、加入安全SDK 总结 参考资料 摘要 本文介绍了iOS平台下的应用安全保护方法&#xff0c;包括字符串加密、类名方法名混淆、程序代码混淆和加入…

input改造文件上传,el-table的改造,点击上传,拖拽上传,多选上传

第一个input标签效果 第二个input标签的效果 el-table的改造效果 <template><div class"outerBox"><div class"analyze" v-if"status"><div class"unFile"><div class"mainBox"><img clas…

如何在日常操作中降低激光切割机的老化速度

光纤激光切割机进入各行各业后给很多行业带来了创新和机遇。光纤激光切割机提升了生产效率、提高了产品品质的、降低了生产成本&#xff0c;节约了加工材料&#xff0c;同时加速了新产品的研发进程。然而光纤激光切割机作为一台机械设备也会面临老化和高能耗的问题。 假如维护保…

WebDAV之π-Disk派盘 + 言叶

言叶是一个功能丰富的笔记软件,为跨平台而设计,可以为你在手机、电脑和其他设备中实现多端同步。从而实现高效率的记事和办公。支持Markdown的语言和多种计算机语法高亮功能,让你笔记中的内容更加主次分明,可以在这里记录一些代码什么的。同时还可以在笔记中插入图片,使其…

安卓开发实例:方向传感器

调用手机的方向传感器&#xff0c;X轴&#xff0c;Y轴&#xff0c;Z轴的数值 activity_sensor.xml <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.c…