vue3源码解析 --- 组件渲染：vnode 到真实 DOM 是如何转变的
源码解析略复杂，这边先实现超级简单版，缕清思路，然后在后文展开细节，水平有限，如有不对，欢迎讨论~
基础知识：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的时候，是深度优先挂载(或更新)。
