Vue组件的本质和手写通过render渲染函数渲染组件

1.组件的本质

组件就是一组 DOM 元素的封装,本质就是一个对象

(mounted函数中打印一下组件即可看到打印的是一个对象)

如何利用javascript对象来描述一个组件?

const MyComponent = {render() {return {tag: 'div',props: {onClick: () => alert('hello')},children: 'click Me'}}
}const vnode = {tag: MyComponent
}

如何修改渲染器的内容?渲染函数时写的只是针对虚拟节点不是针对组件(即传入一个对象)

2.手写组件渲染函数

虚拟节点为字符串时:手写Vue渲染器render函数-CSDN博客

重点:和普通字符串tag不同的时,判断vnode.tag是一个组件时,通过组件的render函数获取组件对象的虚拟节点

    <div id="app"></div><script>// 手写render函数组件对象渲染到页面/*重点:使用vnode.tag作为创建的dom标签el(判断vnode.tag是一个组件时,通过组件的render函数获取组件对象的虚拟节点)*//*** @vnode 虚拟 DOM 对象* @container 一个真实 DOM 元素,作为挂载点,渲染器会把虚拟 DOM 渲染到该挂载点*/function render(vnode, container) {// 通过判断vode的tag为对象则为组件渲染if(typeof vnode.tag === "string"){mount(vnode, container);}else if(typeof vnode.tag === "object"){let comVnode = vnode.tag.render();mount(comVnode, container);}else{// ...其他操作}}// tag为字符串时的渲染函数function mount(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')// 仿组件结构(可以通过render方法获取组件的虚拟节点对象数据)const MyComponent = {render() {return {tag: 'div',props: {},children: [{tag: 'p',props: {},children: '我是一个p标签'},{tag: 'button',props: {onClick: () => alert('hi vue')},children: '按钮'}]}}}const vnode = {tag: MyComponent}render(vnode, container)

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

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

相关文章

TensorFlow2从磁盘读取图片数据集的示例(tf.data.Dataset.list_files)

import os import warnings warnings.filterwarnings("ignore") import tensorflow as tf from tensorflow.keras.optimizers import Adam from tensorflow.keras.applications.resnet import ResNet50 from pathlib import Path import numpy as np#数据所在文件夹 …

Unity C#中LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查

LuaTable、LuaArrayTable、LuaDictTable中数据的增删改查 介绍Lua表lua表初始化lua移除引用lua中向表中添加数据lua中表中移除数据lua表中连接数据lua表中数据排序获取lua表长度获取表中最大值 UnityC#中LuaTableUnityC#中LuaArrayTable、LuaDictTable、LuaDictTable<K,V>…

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法&#xff1f;当然有&#xff01;绝对有&#xff01;而且我要告诉你&#xff0c;学习的快乐可以媲美游戏的刺激。 小学时代&#xff0c;我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学&#xff0c;我总是迫不及待地打开电脑&a…

ES(elasticsearch) - 三种姿势进行分页查询

1. from size 浅分页 "浅"分页可以理解为简单意义上的分页。它的原理很简单&#xff0c;就是查询前20条数据&#xff0c;然后截断前10条&#xff0c;只返回10-20的数据。这样其实白白浪费了前10条的查询。 GET test_dev/_search {"query": {"bool&…

【tg】 7 GroupInstanceCustomImpl

group GroupInstanceCustomImpl 核心GroupInstanceCustomInternal G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\group\GroupInstanceCustomImpl.h 最核心是是GroupInstanceCustomInternal: private:std::shared_ptr<Threads> _threads;std::u…

Spring-Bean的生命周期概述

Bean的生命周期概述 入门使用的Spring代码&#xff1a; ClassPathXmlApplicationContext context new ClassPathXmlApplicationContext("spring.xml"); UserService userService (UserService) context.getBean("userService"); userService.test(); …

Node.js的readline模块 命令行交互的模块

Node.js是一个非常流行的JavaScript运行时环境&#xff0c;它提供了许多内置模块来帮助我们开发应用程序。其中之一是readline模块&#xff0c;它提供了一种简单的方法来读取用户输入并进行交互。 本文将详细介绍readline模块的API和使用案例&#xff0c;并附有代码注释。 re…

财报解读:步步逼近ChatGPT,科大讯飞即将迎来全面爆发?

10月份&#xff0c;科大讯飞进入新的成果验证节点。 一是进一步透露AI进展的财报发布。三季报显示&#xff0c;科大讯飞仍然保持较为稳健的发展步伐&#xff0c;营收始终处于增长状态&#xff0c;对讯飞星火认知大模型的应用成果&#xff0c;进行了进一步揭示。基于此&#xf…

基于LSTM encoder-decoder模型实现英文转中文的翻译机器

前言 神经网络机器翻译(NMT, neuro machine tranlation)是AIGC发展道路上的一个重要应用。正是对这个应用的研究&#xff0c;发展出了注意力机制&#xff0c;在此基础上产生了AIGC领域的霸主transformer。我们今天先把注意力机制这些东西放一边&#xff0c;介绍一个对机器翻译…

文心一言简单体验

百度正式发布文心一言&#xff0c;文心一言 这里的插件模式挺有意思&#xff1a; 测试了一下图解说明&#xff0c;随意上传了一张图片&#xff1a; 提供图解让反过来画&#xff0c;抓住了部分重点&#xff0c;但是还是和原图有比较大的差异&#xff01; 百宝箱 暂未逐个体验&am…

2023年9月青少年软件编程(Python) 等级考试试卷(五级)

2323.9青少年软件编程&#xff08;Python&#xff09; 等级考试试卷&#xff08;五级&#xff09; 分数&#xff1a; 100 题数&#xff1a; 38 一、 单选题(共 25 题&#xff0c; 共 50 分) 1. 阅读以下代码&#xff0c; 程序输出结果正确的选项是&#xff1f; &#xff08; &a…

Linux ————​文件权限

&#xff08;一&#xff09;文件权限 基础补充 文件基本属性&#xff08;Linux中万物皆是文件&#xff09;文件是操作系统用来存储信息的基本结构&#xff0c;是一组信息的集合。文件通过文件名来唯一标识。Linux中的文件名称最长允许255个字符&#xff0c;这些字符可用A~Z、0…

Vuex、localStorage和sessionStorage:如何选择合适的数据存储方式?

&#x1f31f;Vuex、localStorage和sessionStorage&#xff1a;如何选择合适的数据存储方式&#xff1f; 在Web应用开发中&#xff0c;我们经常需要管理和存储数据。而在Vue应用中&#xff0c;我们通常会遇到以下问题&#xff1a;如何管理应用程序中的状态和数据&#xff1f;如…

SpringBoot篇---第五篇

系列文章目录 文章目录 系列文章目录一、Spring Boot 的核心配置文件有哪几个&#xff1f;它们的区别是什么&#xff1f;二、如何集成 Spring Boot 和 ActiveMQ&#xff1f; 一、Spring Boot 的核心配置文件有哪几个&#xff1f;它们的区别是什么&#xff1f; Spring Boot 的核…

【JAVA学习笔记】46 - (43)第十一章作业

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter11/src/com/yinhai/homework11 1.枚举类 1.创建一个Color枚举类 2.有RED,BLUE,BL ACK,YELLOW,GREEN这个五个枚举值/对象: 3. Color有三 个属性redValue, greenValue, blueValue, 4.创建构…

Python的Matplotlib库:数据可视化的利器

引言&#xff1a; Matplotlib是一款强大的Python库&#xff0c;专为数据可视化而设计。无论是绘制折线图、散点图、柱状图还是饼图&#xff0c;Matplotlib都能提供灵活且易于操作的绘图方法。 1. Matplotlib简介 Matplotlib是Python中最流行的绘图库之一&#xff0c;被广泛应…

Kafka To HBase To Hive

目录 1.在HBase中创建表 2.写入API 2.1普通模式写入hbase&#xff08;逐条写入&#xff09; 2.2普通模式写入hbase&#xff08;buffer写入&#xff09; 2.3设计模式写入hbase&#xff08;buffer写入&#xff09; 3.HBase表映射至Hive中 1.在HBase中创建表 hbase(main):00…

电商行业的代言人合伙人模式:创新营销策略的新革命

在当今的电商行业中&#xff0c;传统的营销策略已经无法满足品牌日益增长的需求。为了在激烈的市场竞争中脱颖而出&#xff0c;品牌需要寻找更加创新和有效的营销策略。代言人合伙人模式作为一种新型的营销策略&#xff0c;结合了代言人和合伙人模式的特点&#xff0c;为电商行…

Python学习笔记第七十二天(Matplotlib imread)

Python学习笔记第七十二天 Matplotlib imread读取图像数据修改图像裁剪图像图像颜色 后记 Matplotlib imread imread() 方法是 Matplotlib 库中的一个函数&#xff0c;用于从图像文件中读取图像数据。 imread() 方法返回一个 numpy.ndarray 对象&#xff0c;其形状是 (nrows,…

点击弹出实现模拟百度那样子

<uni-section title"输入框示例" type"line" padding><view class"dialog-box"><text class"dialog-text">输入内容&#xff1a;{{ value }}</text></view><button class"button" type&qu…