Vue3源码：v-ifv-if原理。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

以下列代码为例：

<script setup>
import { ref, reactive, computed, watch } from "vue";
function changeNumber() {
  number.value = !number.value;
}
let number = ref(true);
</script>

<template>
  <div>
    <button @click="changeNumber">change</button>
    <div v-if="number">
      {{ number }}
    </div>
  </div>
</template>

这里说一下，我们本地用vite启动项目的时候，vite本身会把sfc文件（即.vue文件）解析成新的vue文件，解析后的文件如下：

每次更新响应式数据都会执行sfc_render函数生成新vnode树，从此可以看出，v-if在解析后通过$setup.number（即我们示例中v-if绑定的值）判断是生成真实dom还是生成一个v-if注释。