源码解析略复杂，这边先实现超级简单版，缕清思路，然后在后文展开细节，水平有限，如有不对，欢迎讨论~
基础知识：vnode是啥
看到vnode，就想到这是一个对象就行了，主要是描述普通HTML标签或者组件标签的，长这样
描述普通节点：
// <button class="btn" title="btn">click me</button>
const vnode = {
type: 'button',
props: {
'class': 'btn',
title: 'btn'
},
children: 'click me'
}
描述组件节点：
// <custom-component msg="test"></custom-component>
const CustomComponent = {
template:`<div>我是组件</div>`
}
const vnode = {
// 注意此处的type是 对象
type: CustomComponent,
props: {
msg: 'test'
}
}
基础知识：渲染vnode是啥
其实就是将{ type: 'button', children: 'click me' }转化成真实的dom节点，然后插入到文档中，文档自然就会去渲染了
function patch(vnode,container){
// 将vnode转化成真实的元素
const el = document.createElement(vnode.type)
el.textContent = vnode.children
// 将元素挂载到文档中，让文档去渲染展示
container.appendChild(el)
}
特别简化版的vue的例子
此demo是了解组件渲染：vnode 到真实 DOM 是如何转变的
为了极致方便，只使用静态文件
下面可以在你的本地试试，两个文件：index.html和vue.simple.js
<body>
<div id="app">
</div>
<script src="vue.simple.js"></script>
<script>
const c1 = {
name:'c1',
template: `我是c1`
}
const App = {
name:'app',
components: {c1},
// 组件里有组件的话
template: `hello，<c1></c1>`
}
Vue.createApp(App).mount('#app')
</script>
</body>
// vue.simple.js
const Vue = {
createApp(rootComponent) {
const app = {
_component: rootComponent,
mount(rootContainer) {
// 这边是简化了，只写了组件节点的vnode写法
const createVNode = rootComponent => ({ type: rootComponent, shapeFlag: 4 })
// 创建根组件的 vnode
const vnode = createVNode(rootComponent)
// 利用渲染器渲染 vnode
render(vnode, rootContainer)
}
}
return app
}
}
function render(vnode, container) {
// 简单理解为就是执行patch，就是把vnode变成真实的dom，挂载到container上
patch(vnode, container);
function patch(vnode, container) {
// 得到template的 children
const getChildren = (vnode) => {
const div = document.createElement('div')
div.innerHTML = vnode.type.template
return [...div.childNodes]
}
const children = getChildren(vnode)
console.log(children)
const frg = document.createDocumentFragment()
children.forEach(item => {
// 组件 这里为了方便 写死组件名了
if (item.nodeType === 1 && item.nodeName === 'C1') {
// 其实这里本应是patch，但放了方便简化了，大致就是组件内部的先挂载到组件标签的位置。组件是深度优先挂载。
frg.appendChild(document.createTextNode(vnode.type.components.c1.template))
}
// 文本节点
if (item.nodeType === 3) {
frg.appendChild(document.createTextNode(item.textContent))
}
})
// 子节点都创建完了之后，一起插入到文档中，从而渲染出来
document.querySelector(container).appendChild(frg)
}
}
效果图，超级简单:
下面分析源码，但真实的源码很复杂，我择其要点分析，原文01 | 组件渲染：vnode 到真实 DOM 是如何转变的？
应用程序初始化：createApp
其实index.html里核心代码就是Vue.createApp(App).mount('#app')
createApp就是创建了一个app对象
const createApp = (rootComponent) => {
// 创建 app 对象
const app = {
_component: rootComponent,
mount(rootContainer) {
// 创建根组件的 vnode，例子里为了简单直接写死了 其实就是 {type:x, shapeFlag:x}
const vnode = createVNode(rootComponent)
// 利用渲染器渲染 vnode
render(vnode, rootContainer)
}
}
return app
}
核心渲染流程：创建 vnode 和渲染 vnode
创建vnode主要是createVNode
// 主要就是返回 { type, props, shapeFlag }
function createVNode(type, props = null ,children = null) {
if (props) {
// 处理 props 相关逻辑，标准化 class 和 style
}
// 对 vnode 类型信息编码
// 1就是普通标签，4就是组件标签 0是文本 其他类型暂不考虑
const shapeFlag = isString(type) ? 1 : isObject(type)? 4 : 0
const vnode = { type, props, shapeFlag, }
// 标准化子节点，把不同数据类型的 children 转成数组或者文本类型
normalizeChildren(vnode, children)
return vnode
}
渲染 vnode主要是render
render(vnode, rootContainer)
const render = (vnode, container) => {
// vnode是空的话有个销毁逻辑
// 创建或者更新组件，最核心是patch，patch其实就根据组件、元素有对应的处理
patch(container._vnode || null, vnode, container)
// 缓存 vnode 节点，表示已经渲染
container._vnode = vnode
}
原文的描述更多，最核心的点就是，patch的时候，是深度优先挂载(或更新)。
