Vue3 渲染函数 API(五)

h()

h 函数用于创建并返回一个虚拟节点(VNode)

h(
tag, // HTML 标签名、组件对象或异步组件函数
data, // 一个包含组件的props/attrs/domProps/on 等的对象
children // 子虚拟节点 (VNodes),由 h()构建而成, // 也可以使用字符串来生成“文本虚拟节点”
)

import { h, createApp } from 'vue'  const MyComponent = {  render() {  return h('div', {  class: 'my-class',  onClick: () => console.log('Clicked!'),  }, [  h('span', 'Hello, '),  h('strong', 'Vue 3!'),  ])  }  
}  createApp(MyComponent).mount('#app')

mergeProps()

  • mergeProps 并不是一个直接暴露给开发者的函数。然而,在 Vue 的内部实现中,mergeProps 确实被用来合并来自不同来源的属性(props)和属性数据(attributes),特别是当使用高阶组件(Higher-Order Components, HOCs)或组件组合(Composition)时。
  • 虽然开发者通常不需要直接调用 mergeProps,但了解它的工作原理可以帮助你更好地理解 Vue 的渲染过程。
  • mergeProps 的主要作用是将多个属性对象合并为一个单一的属性对象。在 Vue 的上下文中,这通常涉及将组件的 props、attrs、class、style 等合并到一个最终的属性对象中,以便在创建虚拟 DOM 节点(VNode)时使用。

cloneVNode()

克隆一个 vnode。

  • 返回一个克隆的 vnode,可在原有基础上添加一些额外的 prop。
  • Vnode 被认为是一旦创建就不能修改的,你不应该修改已创建的 vnode 的 prop,而应该附带不同的/额外的 prop 来克隆它。
  • Vnode 具有特殊的内部属性,因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。

isVNode()

判断一个值是否为 vnode 类型。

resolveComponent()

按名称手动解析已注册的组件。

  • 为了能从正确的组件上下文进行解析,resolveComponent() 必须在setup() 或渲染函数内调用。
  • 如果组件未找到,会抛出一个运行时警告,并返回组件名字符串。
import { h, resolveComponent } from 'vue'export default {setup() {const ButtonCounter = resolveComponent('ButtonCounter')return () => {return h(ButtonCounter)}}
}

resolveDirective()

按名称手动解析已注册的指令。

  • 为了能从正确的组件上下文进行解析,resolveDirective() 必须在setup() 或渲染函数内调用。
  • 如果指令没有找到,会抛出一个运行时警告,并返回 undefined。

withDirectives()

用于给 vnode 增加自定义指令。
用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 [Directive, value, argument, modifiers] 形式的数组。如果不需要,可以省略数组的尾元素。

import { h, withDirectives } from 'vue'// 一个自定义指令
const pin = {mounted() {/* ... */},updated() {/* ... */}
}// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [[pin, 200, 'top', { animate: true }]
])

withModifiers()

用于向事件处理函数添加内置 v-on 修饰符。

import { h, withModifiers } from 'vue'const vnode = h('button', {// 等价于 v-on:click.stop.preventonClick: withModifiers(() => {// ...}, ['stop', 'prevent'])
})

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

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

相关文章

解析final原理

原理 public class TestFinal {final int a 20; //final保证不能读到两个值} 字节码&#xff1a; 写屏障&#xff1a; 之前的指令不会重排序到后面去&#xff08;有序性&#xff09; 之前的修改、赋值操作之后会同步到主内存中去&#xff08;可见性&#xff09; 0: aload…

大学生如何学习JavaScript?

学习 JavaScript 对于大学生来说是一个宝贵的技能&#xff0c;因为它是现代网页开发的核心语言之一。以下是一些详细的步骤&#xff0c;帮助大学生学习 JavaScript&#xff1a; 1. 了解 Web 开发基础 学习 HTML 和 CSS&#xff0c;这是网页开发的基石。 2. 学习 JavaScript …

什么是transformer?

整个 transformer 的重点在 QKV 结构上。 以前的 CNN 试图通过卷积来表达不同位置数值之间的关系&#xff0c;学习卷积值也就是学习矩阵里的数值之间的特征&#xff0c;所以适合用在图像里面。因为图像就是一个个的像素点形成的矩阵。 RNN 试图通过加入反馈机制来理解一串数值…

Python酷库之旅-开启库房之门

目录 一、库的定义 二、库的组成 三、库的分类 四、如何学好Python库&#xff1f; 五、注意事项 六、推荐阅读 1、Python筑基之旅 2、Python函数之旅 3、Python算法之旅 4、Python魔法之旅 5、 博客个人主页 一、库的定义 在Python中&#xff0c;库(Library)是一个封…

探索智慧机场运营中心解决方案的价值与应用

随着全球航空业的不断发展&#xff0c;机场运营中心的作用日益凸显。智慧机场运营中心解决方案以其高效的管理和智能化的运营模式&#xff0c;成为优化机场运营、提升服务水平的重要工具。本文将深入探讨智慧机场运营中心解决方案的价值与应用&#xff0c;揭示其在机场管理中的…

机器学习常见知识点 2:决策树

文章目录 决策树算法1、决策树树状图2、选择最优决策条件3、决策树算法过程→白话决策树原理决策树构建的基本步骤常见的决策树算法决策树的优缺点 【五分钟机器学习】可视化的决策过程&#xff1a;决策树 Decision Tree 关键词记忆&#xff1a; 纯度、选择最优特征分裂、熵、基…

Ubuntu下ClickHouse安装

用 root 身份运行, 注意在install那一步, 不要设置密码 # 使用官方安装源&#xff0c;跳过签名验证。&#xff08;因为使用 gpg 完全通过代理获取签名的问题至今没有解决。&#xff09; echo deb [trustedyes] https://packages.clickhouse.com/deb stable main > /etc/apt…

电脑上的瑞士军刀

一、简介 1、一款专为 Windows 操作系统设计的桌面管理工具&#xff0c;它具备保存和恢复桌面图标位置的功能&#xff0c;使用户能够在各种情况下&#xff0c;如分辨率变动、系统更新或其他原因导致的图标位置混乱后&#xff0c;快速恢复到熟悉的工作环境。它还拥有诸多实用功能…

【Pyqt6 学习笔记】实现串口调试助手,并将接收到数据模拟键盘输出

文章目录 代码示例main.pyscreen_shot_module.pyqrcmd.pyuntitled.pyuntitled.ui 本文内容是 【Pyqt6 学习笔记】DIY一个二维码解析生成小工具的延申&#xff0c;在原来的基础上实现了串口调试助手功能&#xff0c;并利用 pywinauto的 keyboard模块将接收到数据模拟键盘输出…

【递归+二叉树思想+搜索】 Alice and the Cake题解

Alice and the Cake题解 AC记录&#xff1a;记录-洛谷 题面翻译&#xff08;大概就是题目大意&#xff09; 执行恰好 n − 1 n-1 n−1 次操作&#xff0c;每次操作可以选择当前所有蛋糕中满足其重量 w ⩾ 2 w\geqslant 2 w⩾2 的一块&#xff0c;然后将其分为质量分别为 …

手机连接ESP8266的WIFI,进入内置网页,输入要显示的内容,在OLED显示屏上显示文本

连线 OLEDESP8266含义GNDGND地线VCC3V电源SCLD1时钟线SDAD2通信数据线 只支持英文信息的显示和数字。 #include <ESP8266WiFi.h> #include <ESP8266WebServer.h> #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h>#d…

开发性能优化+开发安全最大化

性能优化 1.优化数据库访问 1.1索引 在数据库表中为需要频繁查询的列创建索引&#xff0c;可以提高查询效率。实质&#xff08;空间换时间&#xff09;&#xff1a;顺指针找到对应指定值的行&#xff0c;index_name&#xff1a;索引名&#xff1b;column_list&#xff1a;指定…

5.大模型高效微调(PEFT)未来发展趋势

PEFT 主流技术分类 UniPELT 探索PEFT 大模型的统一框架&#xff08;2022&#xff09; UIUC 和Meta AI 研究人员发表的UniPELT 提出将不同的PEFT 方法模块化。 通过门控机制学习激活最适合当前数据或任务的方法&#xff0c;尤其是最常见的3大类PEFT 技术&#xff1a; Adapters…

事业单位——被逆袭篇

目录 一、结果 二、考试 三、时间 四、复习 五、总结 一、结果 图1&#xff1a;2024年浙江广播电视集团下属浙江省中波发射管理中心公开招聘笔面试结果 准考证号笔试面试总成绩排名备注107016070.866.48310702416555.44107134390.871.681入围107146869.869.08210715406454.…

征信受损,别再犯傻!

听说你的征信出了点小问题&#xff1f;别急&#xff0c;这事儿说大不大&#xff0c;但也不能掉以轻心。征信&#xff0c;说白了就是你借钱还钱的记录本&#xff0c;一旦它“花”了&#xff0c;借钱可就没那么轻松了。 先来说说这征信“花”了是咋回事 征信“花”了&#xff0c…

18.1 HTTP服务器-极简服务器、请求与响应

1. 极简服务器 大道至简。使用Go语言构建世界上最简单的HTTP服务器&#xff0c;仅需四行代码。 标准库的net/http包提供了多种用于创建HTTP服务器的方法&#xff0c;其中包括&#xff1a; http.HandleFunc("/", rootHandler) 第一参数&#xff1a;访问的url 第二…

常见的50道java面试题及答案【java学习+面试指南】(九)

maven是什么&#xff1f; Apache Maven是一个软件项目管理和理解工具。基于项目对象模型&#xff08;POM&#xff09;的概念&#xff0c;Maven可以从一个中心信息管理项目的构建&#xff0c;报告和文档。 项目构建 在eclipse中新建一个WEB工程。 进行编码及编写配置文件 对源代…

【Linux】进程间通信之命名管道

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

109.网络游戏逆向分析与漏洞攻防-装备系统数据分析-商店与捨取窗口数据的处理

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 现在的代码都是依据数据包来写的&#xff0c;如果看不懂代码&#xff0c;就说明没看懂数据包…

【优选算法】详解target类求和问题(附总结)

目录 1.两数求和 题目&#xff1a; 算法思路&#xff1a; 代码&#xff1a; 2.&#xff01;&#xff01;&#xff01;三数之和 题目 算法思路&#xff1a; 代码&#xff1a; 3.四数字和 题目&#xff1a; 算法思路&#xff1a; 代码&#xff1a; 总结&易错点&…