render 函数理解

Posted 2023-03-16

参考技术A 感觉render是为补救template缺点而诞生的

Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪。
return createElement('h1', 'Hello World!')
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字是createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

render方法会传入一个createElement函数，它是一个用于创建DOM元素或者用于实例化其他组件的构造方法。render方法必须返回一个createElement函数的调用结果，也就是模版内的顶层元素（这个方法在vue2的习惯性使用中经常用h来命名）。
render 实例：

相当于模板语法：

渲染结果：

createElement的定义

向构造的VNode对象设置文本时可以直接传入字符串，例如：
　　　　createElement('div','这是行内文本')
　　　　输出结果就是：
　　　　<div>这是行内文本</div>

参考： https://www.cnblogs.com/qdcnbj/p/8313061.html