「Vue源码学习(三)」那些你不知道的- 初次渲染原理

 各位好呀，今天我们继续一起学习Vue源码，我们这期文章将会给大家带来初次渲染原理的内容。上一节我们讲到了「Vue源码学习(二)」你不知道的-模板编译原理，也就是讲到了把模板转换成了render函数所需格式，那么今天，我就给大家讲一下，Vue是怎么拿着这个东西，去生成真实DOM并展示的。

1、编译后的产物

 其实在第二节最后部分，我们有讲到，将模板编译完以后，会得到一个render函数。那么对于这个render函数，其实就是返回了一个VNode，它是一个虚拟DOM节点。

<div id="app">
    <h1>{{ message }}</h1>
</div>

 最终编译完以后，得到的render函数实际上是长这个样子的：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _c('div', { attrs: { id: "app" } }, [_c('h1', [_v(" " + _ctx.message + " ")])])
}

 就是这段代码，大家可以先不用太在意，因为它其实就是用来表示我们这段模板对应的VNode的。

2、生成真实DOM

 生成VNode以后，下一步自然就是生成真实DOM。那么Vue又是如何生成真实DOM的呢？就是通过patch这个函数去生成。

patch(oldVNode, vnode)

 这个函数有2个参数，一个是旧的VNode，一个是新的VNode。实际上在最初次渲染的时候，旧的VNode是空的，因为它本来就是没有真实DOM，所以为空也是理所当然的。但是，在之后进行DOM更新的时候，这个旧的VNode就有了值。

 patch函数做什么呢？其实它就是通过递归的方式来对比新旧VNode的区别，然后通过DOM API来生成、更新、删除真实DOM。

3、优化

 上面我们提到了，patch函数是通过递归对比新旧VNode的区别的，但是，仅仅是这么做就完了吗？其实不然，Vue还做了不少优化。比如说，它会使用一个叫做“双缓冲”的策略来减少DOM操作的次数，从而提高性能。

 “双缓冲”策略是通过创建一个新的VNode树，然后把新的VNode树和旧的VNode树进行对比，找出它们之间的差异。然后，它只会在真实DOM上应用这些差异。这样就减少了DOM操作的次数，提高了性能。

结语

 好啦，本期文章到这里就结束了。希望大家能够通过本文了解Vue的初次渲染原理，以及它是如何通过“双缓冲”策略来提高性能的。如果您有任何问题或建议，欢迎在评论区留言。我们下期再见！