1、vite-plugin-inspect

vite-plugin-inspect 可以让开发者在浏览器端就可以看到vue文件编译后的代码、vue文件的相互依赖关系

2、安装

npm i -D vite-plugin-inspect

// vite.config.ts
import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect()  // 加上这一行
  ],
}

然后重启项目，这个时候会有三个地址，最后一个就是这个插件提供的地址

3、使用

<template>
  <div>
    <h3>你好</h3>
    <ul>
      <li v-for="i in 20">{{ i }}</li>
      <li v-for="i in 20">
        <span v-if="i > 5">显示</span>
      </li>
    </ul>

    <input type="text" v-model="name" @change="handleNameChange" />
  </div>
</template>

<script setup>
import { ref } from "vue";

const name = ref("呆呆狗吗？");

const handleNameChange = (e) => {
  console.log(e.target.value);
};
</script>

<style scoped></style>

h3 标签 编辑后的代码就是

1. 先执行_createElementVNode 创建虚拟DOM，第一个参数就是标签名称；第二个参数是属性；第三个参数是 这个标签的文字，或者是子节点(如若是子节点应该是一个数组)
2. 然后定义了 _sfc_render 方法，返回一个块虚拟DOM，第一个参数 h3 的虚拟DOM

---

v-for 直接循环20行li。的代码，编辑后的代码就是下面这个

也是先创建 ul 的 虚拟DOM，然后 子元素里面是 渲染 li ， 用了 文档片段，里面 包含 li 标签 20次

4、链接

• npm vite-plugin-inspect