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