Vue 3 中 v-if 和 v-show 指令实现的原理（源码分析）

前言

又回到了经典的一句话：“知其然，而后使其然”。相信大家对 Vue 提供 v-if 和 v-show 指令的使用以及对应场景应该都滚瓜烂熟了。但是，我想仍然会有很多同学对于 v-if 和 v-show 指令实现的原理存在知识空白。

所以，今天就让我们来一起了解一番 v-if 和 v-show 指令实现的原理～

v-if

在之前 【Vue3 源码解读】从编译过程，理解静态节点提升 一文中，我给大家介绍了 Vue 3 的编译过程，即一个模版会经历 baseParse、transform、generate 这三个过程，最后由 generate 生成可以执行的代码（render 函数）。

我们可以直接在 Vue3 Template Explore 输入一个使用 v-if 指令的栗子：

<div v-if="visible"></div>

然后，由它编译生成的 render 函数会是这样：

render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.visible)
    ? (_openBlock(), _createBlock("div", { key: 0 }))
    : _createCommentVNode("v-if", true)
}

可以看到，一个简单的使用 v-if 指令的模版编译生成的 render 函数最终会返回一个三目运算表达式。首先，让我们先来认识一下其中几个变量和函数的意义：

• _ctx 当前组件实例的上下文，即 this
• _openBlock() 和 _createBlock() 用于构造 Block Tree 和 Block VNode，它们主要用于靶向更新过程
• _createCommentVNode() 创建注释节点的函数，通常用于占位

显然，如果当 visible 为 false 的时候，会在当前模版中创建一个注释节点（也可称为占位节点），反之则创建一个真实节点（即它自己）。例如当 visible 为 false 时渲染到页面上会是这样：