自己动手写一个render函数

本文介绍了如何从头开始编写一个简单的render函数,涉及对象定义、根节点挂载、渲染逻辑、props参数处理以及应对多个子元素的情况。通过逐步升级render函数,展示了如何处理元素属性、事件绑定等常见需求。

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

前言

在这个之前我们需要了解render是什么?

可以去之前的文章里面看看 《 搞懂vue-render函数(入门篇)

本文目录结构

  1. 定义一个对象

  2. 获取根节点挂载

  3. 开始重头戏

  4. 升级render

  5. props参数

  6. 多个子元素

  7. 全部代码

  8. 总结与福利

废话不多说,快快快 上车!!!

定义一个对象

先定义一个数据对象来作为我们的参数

let data = {
    tag:"h2",
    props:{},
    children:"严老湿"
}

tag 作为标签名,props 作为属性对象,children 作为子元素或者文本节点

哈哈哈 还是老套路 先写一个 h2 标签试试水

获取根节点挂载

这个So Easy啦

<div id="app"></div>
// app 作为我们的根节点
let app = document.querySelector('#app')

获取到 app 节点之后呢?我们是不是需要 appendChild 我们第一步定义的 data 对象

// 此时还没有render这个函数
app.appendChild(render(data))

这个 render 函数就是我们今天要写的重要内容

开始重头戏

天才第一步 ,先定义一个 render 函数

// 接收传入的参数
const render = (options) = >{
    // 获取数据中的标签并创建
    let el = document.createElement(options.tag);
 // 打印el
 console.log(el) // <h2></h2>
 // 将节点返回
 return el
}
app.appendChild(render(data))

此时我们的元素已经创建成功,接下来我们需要做的就是,把它的文本,渲染上去。

渲染文本节点

children 赋值给到节点文本内容

const render = (options) = >{
    let el = document.createElement(options.tag);
 // 我们在这里传入 children 文本
 el.textContent = options.children
 return el
}
app.appendChild(render(data))

严老湿 :好了,render 写完了,下课吧!

童鞋 :等等!!就这???

开个玩笑 当然不是啦!这写得也真是太简陋了吧

升级render

刚刚我们其实已经写了一个简陋版本的render 但是存在很多问题!

  • children 如果是数组,多个子元素呢?

  • 如果props 里面有属性呢?

  • 我还想要点事件触发函数呢?

....

还有很多问题,所以我们来加强一下,冲鸭!!!

props参数

我们现在先来升级一下 props 参数,如我们需要在元素上加 classidon

首先是一号选手 class

我们先将数据中的props中新增一个class 且 它的值为 myClass

let data = {
    tag:"h2",
    props:{
        class:"myClass"
    },
    children:"严老湿"
}

数据改造好了,我们来看看 render 改如何升级

const render = (options) = >{
    let el = document.createElement(options.tag);
 // 判断是否是对象,并且不是null
 if(typeof options.props ===&nb
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值