自己动手写一个render函数

前言

在这个之前我们需要了解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 赋值给到节点文本内容