vue中render函数和h函数以及jsx使用的详解

最新推荐文章于 2024-06-03 19:07:19 发布
最新推荐文章于 2024-06-03 19:07:19 发布
阅读量3.7k 收藏 17
点赞数 3
分类专栏： Vue日常总结 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41880073/article/details/124202016
版权

vue中h函数的详解

一、认识h函数

Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用 渲染函数 ，它比模板更接近编译器
  • Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）
  • 事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode
  • 那么，如果你想充分的利用JavaScript的编程能力，我们可以自己来编写 createVNode 函数，生成对应的VNode
  • 那么我们应该怎么来做呢？使用 h()函数
  • h() 函数是一个用于创建 vnode的一个函数
  • 其实更准确的命名是 createVNode() 函数，但是为了简便在Vue中将之简化为 h() 函数

二、h()函数 如何使用呢？

  • 它接受三个参数：
最低0.47元/天 解锁文章
丑小鸭变黑天鹅
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的渲染函数h函数基本用法及原理
weixin_51431277的博客
01-21 988
h函数、h渲染函数、vue中的h函数、vue中的h渲染函数、ctx.slots.default、ctx.emit、props、IProps、interface、Btn、onDbClick、template、tsx、jsx、h函数原理
vue中的h函数与JSX语法
NGUP_LEE的博客
12-06 3113
vue不仅像react一样实现了jsx，而且还借助jsx发挥了javascript动态画的优势，了解学习jsx可以让你更灵活的开发需求。在聊vue中的JSX之前，需要简单介绍一下 h 函数，理解了 h 函数，会更好的理解JSX。是一个用于创建VNode的实用程序，你可以理解为，但因为它频繁的被使用，所以简称为函数。 2.理解h函数 在vue3的项目中，是默认的写法，vue运行时会把解析为函数，之后，组件运行的时候通过函数去返回函数的运行结果去构造虚拟DOM 上面的图片是我随意运行了一个demo，打开vue调
Vue渲染函数与JSX指南
最新发布
06-03 1160
渲染函数是一个用于生成 VNode（虚拟 DOM 节点）的函数。它是 Vue.js 中一种底层的 API，用于渲染视图。JSX 是 JavaScript 的一种语法扩展，它允许在 JavaScript 代码中编写 HTML 样式的标记。JSX 的主要目的是使组件的开发更加简单和直观。</h1>;上面的代码创建了一个h1标签，并将其渲染为一个 React 元素。在 JSX 中，你可以使用函数或类来定义组件。这些组件可以接收参数（称为 props），并可以渲染 JSX 元素。
vue —— h函数的学习与使用
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
01-25 7869
介绍vue中的h函数及其使用
Vue3使用h函数创建子组件（涉及到$emit，props的传递以及多个具名插槽的使用）
热门推荐
m0_46627730的博客
04-06 1万+
h 函数是什么 h 函数本质就是 createElement() 的简写，作用是根据配置创建对应的虚拟节点，在vue 中占有极其重要的地位！！！ h 函数的配置 参数 接收三个参数：type，props 和 children type 类型：String | Object | Function 详细：HTML 标签名、组件、异步组件或函数式组件 （注意：Vue3 不支持组件名用字符串表示了，必须直接使用组件名） 例如： import MySon from './son.vue' h('div',
Vue3 高级语法（一）—— h函数、jsx
zep
03-02 1万+
一、认识h函数 Vue推荐在绝大数情况下使用模板来创建你的HTML，然后一些特殊的场景，你真的需要JavaScript的完全编程的能力，这个时候你可以使用渲染函数 ，它比模板更接近编译器； 前面我们讲解过VNode和VDOM的改变： Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚 拟DOM（VDOM）； 事实上，我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode； 那么，如果你想充分的利用JavaScri
vue2&&vue3--render函数(h)
每天都要努力学习哦~~
10-24 4711
此更改不会影响<template>用户。h现在是全局导入，而不是作为参数传递给渲染函数更改渲染函数参数，使其在有状态组件和函数组件的表现更加一致VNode 现在有一个扁平的 prop 结构请继续阅读来获取更多信息！
何时/使用 Vue3 render 函数的教程详解
10-15
主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue中render函数的使用详解
10-17
主要介绍了vue中render函数的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中render函数的使用方法
08-28
Vue 中 render 函数的使用方法 在 Vue 中，render 函数是一种强大的工具，允许开发者使用 JavaScript 代码动态生成 HTML 内容。今天，我们将深入探讨 render 函数的使用方法，並探讨它在实际开发中的应用场景。 ...
浅谈Vue中render中的h箭头函数
01-19
vue2.0新增了render方法，官方案例写的是： render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是：(只有一个个return语句，...
Vue 3的 h 函数详解
訾博（ZiBo）的博客
09-27 6071
Vue 3的`h`函数（`createVNode`）是前端开发中一个强大的工具，用于创建虚拟DOM节点。虚拟DOM是Vue框架中的核心概念，通过它，我们可以更高效地更新页面内容。本文将深入探讨Vue 3的`h`函数及其用法。
vue 中的h函数
飞翔的熊blabla
11-24 1399
在讲h函数之前，我们先来了解下虚拟dom： 虚拟dom简单来说就是一个普通的JavaScript对象，包含tag，props，children三个属性。。。 <div id="app"> <p className="text">lxc</p> </div> 上边的HTML代码转为虚拟DOM如下： { tag:"div", props:{ id:"app" }, children:[ { ...
render函数的使用-笔记
jdjks的博客
11-15 1078
render函数的使用-学习笔记
关于vue h函数的使用
statfly的博客
07-26 4708
vue h函数 绑定事件
Vue中的 h 函数
努力努力再努力的博客
05-19 9277
Vue中的 h 函数 在了解 h 函数之前，我们需要先了解 虚拟DOM， 什么是 虚拟DOM？ 虚拟DOM 是使用JS 对象模拟真实的DOM结构，用JavaScript 对象描述DOM 的层次结构。DOM中的一切属性都在虚拟DOM 中有对应的属性。 Vue当中虚拟DOM 的实现参考的是 snabbdom 库 虚拟DOM 就是一个简单的JavaScript 对象，包含 tag、props、children 三个属性 在初始化Vue项目时，经常会在 main.js 文件中 看到这一段代码： new Vue({
vue的h函数_【Vue】关于Vue中的 render: h => h(App) 具体是什么含义？
weixin_34081203的博客
12-31 1646
刚开始学Vue,再看别人的例子时经常会看到render: h => h(App)这样一行代码，但是有的例子也没有这行代码也运行正常。去官方看文档 找到render function 没有太理解，求大神讲解这行代码的作用和为什么要这样做。谢谢！回答=> 是ES6的箭头语法// ES5(function (h) {return h(App);});// ES6h => h(App);...
vue的h函数_函数表达解析 - h 和 create-element
weixin_35740814的博客
01-13 1298
>[success] # h函数~~~1.将函数表达式的形式渲染成 虚拟dom，我们这里处理不像'snabbdom',对参数做了重载处理，我们这里采用最简单的仅仅判断是'对象'还是'文本'如果是文本就手动转成虚拟dom~~~>[danger] ##### 代码部分~~~1.我们这里直接判断如果是对象就默认是h函数返回的虚拟dom，如果不是默认是文本，并且将文本转换成h函数形式2.虽然没...
vue h 渲染函数
汤迷的博客
04-09 4216
（一）、h(c1, c2, c3) 参数说明：（详细参数看最后说明） c1： 标签名 / 组件名（例如antd组件） c2： 子级[] / 属性{}, 组件的属性用props, 其他的，如类名'class',样式'style' c3： 文本（如果是有子级的话，则文本放在子级的第一个参数） （二）、使用 1、可直接传入标签，前提是只能有一个父级，变量使用{}引入，在一些特殊情况不能用，例如要加入点击事件@...
vue中render函数详解
03-25
Vue 的 render 函数是 Vue 组件渲染的核心，通过 render 函数可以实现更加灵活的组件编写方式。下面是关于 Vue 中 render 函数的详细介绍： 1. 概念定义： Vue 的 render 函数是一个纯 JavaScript 函数，它接收一个 createElement 函数作为参数，用于生成虚拟 DOM，最终将组件渲染成 HTML。在 Vue 组件中，可以使用 render 函数来代替 template，这样可以更加灵活地渲染组件。 2. createElement 函数： createElement 函数是 Vue 中的一个工厂函数，用于快速创建虚拟 DOM 元素。createElement 函数接收三个参数，第一个参数是标签名或组件，第二个参数是属性对象，第三个参数是子节点。 使用 createElement 函数可以快速创建虚拟 DOM 元素，例如： ```javascript // 创建一个 div 元素 createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) ``` 3. Vue 组件的 render 函数： Vue 组件的 render 函数接收一个 createElement 函数作为参数，通过该函数创建虚拟 DOM 元素。在 render 函数中，通过编写 JavaScript 代码来生成 DOM 元素，可以使用条件判断、循环语句等，从而实现更加灵活的组件渲染。 例如，下面是一个简单的 render 函数： ```javascript render (createElement) { return createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) } ``` 4. render 函数与 template 的对比： 相对于 template，render 函数的优点在于：可以使用 JavaScript 代码生成 DOM 元素，可以进行条件判断、循环语句等；可以实现更加灵活的组件开发；可以更好地控制组件的渲染流程。 相对于 template，render 函数的缺点在于：需要熟悉 JavaScript 语法和 createElement 函数；在实现复杂组件时，需要编写更多的代码。 5. render 函数和 JSX： JSX 是 Facebook 出品的一种语法扩展，可以在 JavaScript 中编写类似 HTML 的语言。与 render 函数类似，JSX 也是将组件编写成 JavaScript 代码的方式。 Vue 也支持 JSX 语法，Vue 的 JSX 实现是通过 Babel 插件实现的。使用 JSX 可以更加直观地编写组件，但需要熟悉 JSX 语法和相关工具的使用。 6. 总结： render 函数是 Vue 组件的核心，它通过 createElement 函数创建虚拟 DOM 元素，最终将组件渲染成 HTML。相对于 template，render 函数可以实现更加灵活的组件开发，但需要熟悉 JavaScript 语法和 createElement 函数。同时，Vue 也支持 JSX 语法，可以更加直观地编写组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值