vue 2.x template模板里渲染vNode的实现方案

最新推荐文章于 2025-03-18 19:00:00 发布
最新推荐文章于 2025-03-18 19:00:00 发布
阅读量5.2k 收藏 4
点赞数 2
分类专栏： 前端开发笔记 前端开发-踩坑 vue开发技巧 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/haishangfeie/article/details/109062582
版权
本文介绍了在Vue 2.x中如何在template模板内渲染vNode，通过创建组件并利用createElement API来实现。在实现过程中，遇到对象作为参数时会导致渲染失败的问题，解决方案是正确包裹vNode，避免Vue将对象识别为数据对象。文章通过示例代码和官方文档解释了这个问题及其解决办法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景

这两天我打算抽象一个简单的表格组件，需要将类似elementUI的table-column那样将插槽里的内容应用到cell里面，这时我就需要在模板里面渲染vNode了，由于之前我是参考elementUI实现表格组件的，这次只是简单实现，就没有给项目引入jsx（主要是想试试其他的实现，在工作之余找点乐趣。。）。也是在网上找了很久，网上倒是确实有方案，但好像讲得不是很浅显，至少我是差点漏过去了。

就这个如何在vue template里直接渲染vNode

在这里插入图片描述

感谢这个哥们，解决了我的问题，我这里其实也只是再将他的方案写的清晰一点而已。
话说，vue3都出来了，现在写这个估计也没有多少用了，想着就当是水一下文章也好也许恰好还是有人需要，毕竟也不是每个公司都马上就上vue3不是。。

方案

其实方式就是创建一个组件，将vnode当作参数传入，利用createElement api 渲染，或者说在render里面渲染。可以创局部变量，当然也可以抽离出一个render-dom组件。我的话是创建了局部变量，主要是感觉这种也不是很通用，再者那个参数的类型写得不是很好，基本就是报一个错补一个类型，( ╯□╰ )，

最低0.47元/天 解锁文章
【Vue2.x源码系列03】数据驱动渲染（Render、Update）
supeerzdj的博客
07-19 180
上一篇文章我们介绍了 Vue2模版编译原理，这一章我们的目标是弄清楚模版 template和响应式数据是如何渲染成最终的DOM。数据更新驱动视图变化这部分后期会单独讲解我们先看一下模版和响应式数据是如何渲染成最终DOM 的流程。
【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM
吉帅振博客
07-05 739
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化相信作为一个 Vue.js 的开发者，最熟悉的应该就是组件了，我们开发 Vue.js 的项目，大部分时间都是在写组件，组件系统是 Vue.js 的一个重要概念，它是一种对 DOM 结构的抽象，我们可以使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的
vue2.x vnode编译过程
qq_27314517的博客
11-16 184
vnode是vue中的虚拟dom节点对象 什么是虚拟dom节点：不是真实的dom节点，是js对象。 template： <div id="app"> <p>{{message}}</p> <button @click="btnAction">按钮</button> </div> 1.第一渲染，需要根据template中的模版，渲染出来初始的dom结构 <div id="app"> <p>hello
vue3 在 template 模板中使用 VNode 对象渲染
言小溪 的博客
10-26 5401
琢磨了半天，其实非常简单 自定义组件： VNode 可以独立创建一共 VNode.ts 或者 js 文件， 总之就是导出一个Vue组件，你也可以直接在组件里面定义这个对象，然后直接在 template 中使用即可 export const VNode = defineComponent({ props: { content:{ type:Object } }, render(): any { return thi
Vue渲染函数 - render 函数
最新发布
m0_58680865的博客
03-18 1265
render 函数是 Vue 组件的一个方法，用于 返回一个虚拟节点（VNode）结构，该结构将被 Vue 转换为真实的 DOM 元素。// 如何展示页面的逻辑h：这个参数是一个函数，用于创建虚拟节点。通常，开发者将会将它称为 createElement，但是在 Vue.js 的文档中通常用字母 h 来表示。
在Vue template 中使用VNode(JSX)
japlus的博客
06-11 4222
使用 vue 组件 在template中使用VNode
vue如何通过VNode渲染节点
博哥的二进制世界
11-24 2619
vue如何通过VNode渲染节点
类vue将template转为vnode的流程
weixin_34375054的博客
07-23 1516
类vue将template转vnode全流程，模板为 <div id="abc"><p class="www">{{msg}}</p><p class="hhh"><span>{{msg1}}</span></p></div> 核心函数par...
Vue2源码学习笔记 - 20.渲染与编译—createComponent 创建组件VNode
小问's blog
08-05 1052
如上所述，函数先处理组件的构造函数，然后整理相关数据，再安装钩子函数，最后创建组件占位 vnode 对象。值得注意的是，这个 vnode 对象并不是实际渲染时 DOM 元素对应的 vnode，正如它的名字一样，它更像是用来占位的。其中的钩子函数在渲染时会创建组件实例，这个后面我们继续研究学习。...
Vue 2.x 源码解析：VNode 的创建与渲染过程
在Vue 2.x版本中，无论采用何种方式（如编写render函数、使用template或el属性、或.vue单文件组件），最终都会转化为render函数来生成虚拟节点（vNode），进而更新实际的DOM。为了理解这一过程，文章建议读者预先...
Vue2.x中的Render函数详解
11-26
Render函数是基于JavaScript实现的，与Vue的模板编译机制相结合，使得在状态变化时，通过虚拟DOM的diff算法来定位并更新实际DOM，避免了不必要的DOM操作，提升了渲染效率。 虚拟DOM是一种轻量级的JavaScript对象...
【手写 Vue2.x 源码】第十八篇 - 根据 render 函数，生成 vnode
BraveWangDev
01-12 1250
本篇，根据 render 函数，生成 vnode，主要涉及一下几点：1，封装 vm._render 返回虚拟节点；2，_s，_v，_c的实现；
【手写 Vue2.x 源码】第十九篇 - 根据 vnode 创建真实节点
BraveWangDev
01-12 1075
本篇，根据 vnode 虚拟节点创建真实节点，主要涉及以下几点：1，vnode 渲染真实节点的步骤；2，Vue 原型方法 _update 的扩展；3，patch 方法中的两个步骤：1）创建真实节点；2）替换掉老节点；4，createElm实现：根据虚拟节点创建真实节点；
【手写 Vue2.x 源码】第十一篇 - Vue 的数据渲染流程
BraveWangDev
01-08 776
本篇，主要介绍了 vue 数据渲染的核心流程，初渲染与更新渲染：1，通过`template`模板，生成`ast`语法树；2，根据`ast`语法树，生成`render`函数；3，根据`render`函数，生成`vnode`虚拟节点；4，根据`vnode`虚拟节点，创建真实节点；5，使用真实节点替换原始节点；
vue渲染器的实现
weixin_46319117的博客
12-01 712
虚拟DOM渲染过程: template => render function渲染函数 => vnode => 真实DOM => 视图 vnode是啥❓就是一个普通的javascript对象，或者说是不同类型的DOM元素，简单的说 vnode就是可以理解成节点描述对象 具体实现看代码???? index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-
Vue源码解析(模板编译篇一)
BayMin0-0的博客
02-02 233
模板编译综述 1.前言 前几篇文章中我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程，而虚拟DOM存在的必要条件是得先有VNode，那么VNode又是从哪儿来的呢？这就是接下来几篇文章要说的模板编译。你可以这么理解：把用户写的模板进行编译，就会产生VNode。 2.什么是模板编译 在日常开发中，我们把写在<template></template>标签中的类似于原生HTML的内容称之为模板。 为什么说是“类似于原生HTML的内容”而不是“就是HTM
对vue的template(模板)编译的理解
感恩、奋进、自信
03-20 6950
对vue的template(模板)编译的理解简单的说法：先转化为AST树，在得到的render函数中返回VNode（vue的虚拟DOM节点）详细步骤● 首先，通过compile编译器把template编译成AST语法树（abstract syntax tree，即源代码的抽象语法结构的树状表现形式），compile是creatCompiler（createCompiler是用以创建编译器的）的返回...
vnode 在 Vue 中的作用
记录美好生活
02-15 1476
用 JS 模拟 DOM 结构，patch 到真实 DOM。
render渲染一个element-UI的table组件
晚星的博客
06-27 1734
render
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值