vue中渲染函数Render原理解析

Posted 2023-03-16

参考技术A render函数的职责就是把模板解析成Vnode（虚拟DOM）节点

可以分解成几个问题：
1.模板编译的输出结果是什么？
模板编译会将用户写的模板↓

转换成用层级对象表达的ast

因为本文的重点不是模板编译，所以这里的转换过程略，但我推荐你
https://vue-js.com/learn-vue/complie/
可以解答你的疑惑。

不用急，函数内容(with(this)....)的形成会在后面讲到。
再说明一点，你可能会奇怪render函数为什么要先

这其实是一种特殊语法,在with内部的函数执行环境会切换为this，_c明明没作为参数传进函数体内部，但为何能调用？因为this上有_c方法，而函数内部环境又是this所以能直接调用，而这个this是什么？实际上就是vue实例vm啦！

中间函数会多次调用_c，也就是createElemnt来生成vnode,
_c的作用是根据用户输入的参数来生成相应的vnode节点，官方api文档中createElement的用法如下，是不是和上面render函数内的内容很像，实际上就是一回事。

PS:vnode长什么样子？如下，这就是render最后执行的结果

前人已经讲得很完备了，直接贴出来
https://vue-js.com/learn-vue/complie/codegen.html#_1-%E5%89%8D%E8%A8%80

在initRender中vue为vue的实例vm定义了_c函数，
这就为渲染函数中要调用的_c埋下了伏笔。
但是这里实际上还不是真正定义render函数的位置，那么真正定义render函数的位置在哪里的？
在render.js文件中，滚轮继续向下翻我们发现了这个↓

观察 vnode = render.call(vm._renderProxy, vm.$createElement)就是调用render函数的地方，并生成了vnode最后返回vnode节点
在此之后，vnode利用diff算法就可以完成对页面的数据更新了。

执行render的过程就是将_c执行，补充_c返回的vnode对象的过程

那么非常感谢你看到这里，那么最后我们再解释一下_c也就是createElement相信你就能完全弄明白整个render的过程了！
以下是createElement的源码:

第一层createElement只是个中间层，它实际上是为了调用_createElement而做了一些中间处理

而对_createElement大致扫过一眼，最后return的是vnode节点，这就是_createElement的作用对比render内部来看:
根据环境（context,一般是vm），标签（tag:div），data: attrs:"id":"NLRX"，和 children（子节点）来生成vnode