Study NoteAppearance
什么是运行时？
在 Vue3 的 源码中存在一个 runtime-core 的文件夹，该文件夹内存放的就是 运行时 的核心代码逻辑。
runtime-core 中对外暴露了一个函数，叫做 渲染函数 render
我们可以通过 render 代替 template 来完成 DOM 的渲染：
有些同学可能看不懂当前代码是什么意思，没有关系，这不重要。
html
<!-- 代码存放于demo目录下 -->
<body>
<div id="app">
<!-- 目标如下： -->
<!-- <div class="test">hello render</div> -->
</div>
</body>
<script>
const {render,h} = Vue
// 生成Vnode
const Vnode = h('div',{
class:'test'
},'hello render')
// 拿到承载的容器
const container = document.querySelector('#app')
// 渲染
render(Vnode,container)
</script>
我们知道，在 Vue 的项目中，我们可以通过 template 渲染 DOM 节点，如下：
html
<template>
<div class="test">hello render</div>
</template>
但是对于 render 的例子而言，我们并没有使用 template，而是通过了一个名字叫做 render 的函数， 返回了一个不知道是什么的东西，为什么也可以渲染出 DOM 呢？
带着问题，我们来看：
我们知道在上面的代码中，存在一个核心函数：渲染函数 render ，那么这个 render 在这里到底做了什么事情呢？
继续往下看：
假设有一天你希望根据如下数据：
json{ type:'div', props:{ class:test }, children:'hello render' }渲染出这样一个div：
html<div class="test">hello render</div>
那么我们根据这个需求来写出以下代码：
js
// 代码存放于demo文件夹中
const vnode = {
type:'div',
props:{
class:'test'
},
children:'hello render'
}
// 创建一个 render 函数
function render(vnode){
// 根据type创建dom节点
const ele = document.createElement(vnode.type)
// 把props中的class赋值给ele的className
ele.className = vnode.props.class
// 把children赋值给ele的innerText
ele.innerText = vnode.children
// 把ele作为子节点插入body中
document.body.appendChild(ele)
}
render(vnode)
在这样一个代码中，我们成功的通过了一个 render 函数渲染出 了对应的DOM，和前面的 render 示例类似，他们都是渲染了一个 vnode ，这样的代码是不是妙极了！！！
但是呢，你经常这么写，用了一段时间之后，觉得很麻烦，你就想能不能 光写一个HTML标签的格式 来进行渲染呢？
用现在我们已经了解到的知识，是不是不能解决了？
没错，那就不是以上 运行时 的代码可以解决的了！
所以说，我们刚刚编写的这样一段代码，就是运行时的代码“框架”！
最后，做个总结： 运行时可以利用 render 把 vnode 渲染成真实的 dom 节点