1、vite-plugin-inspect

vite-plugin-inspect 可以讓開發(fā)者在瀏覽器端就可以看到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. 先執(zhí)行_createElementVNode 創(chuàng)建虛擬DOM，第一個參數(shù)就是標簽名稱；第二個參數(shù)是屬性；第三個參數(shù)是 這個標簽的文字，或者是子節(jié)點(如若是子節(jié)點應該是一個數(shù)組)
2. 然后定義了 _sfc_render 方法，返回一個塊虛擬DOM，第一個參數(shù) h3 的虛擬DOM

---

v-for 直接循環(huán)20行l(wèi)i。的代碼，編輯后的代碼就是下面這個

也是先創(chuàng)建 ul 的 虛擬DOM，然后 子元素里面是 渲染 li ， 用了 文檔片段，里面 包含 li 標簽 20次

4、鏈接

• npm vite-plugin-inspect