--- theme: vue-pro --- 本文是 [vue3编译原理揭秘](https://juejin.cn/column/7340830470463242278) 的第 19 篇，和该系列的其他文章一起服用效果更佳。 1. [vue3的宏到底是什么东西？](https://juejin.cn/post/7335721246931189795) 2. [Vue 3 的 setup语法糖到底是什么东西？](https://juejin.cn/post/7339210740455440419) 3. [看不懂来打我，vue3的.vue文件(SFC)编译过程](https://juejin.cn/post/7343139078486982710) 4. [为什么defineProps宏函数不需要从vue中import导入？](https://juejin.cn/post/7345129748006354978) 5. [天天用defineEmits宏函数，竟然不知道编译后是vue2的选项式API？](https://juejin.cn/post/7347670979635314703) 6. [面试官：只知道v-model是:modelValue和@onUpdate语法糖，那你可以走了](https://juejin.cn/post/7349936384512131107) 7. [defineModel是否破坏了vue3的单向数据流呢？](https://juejin.cn/post/7354960709010260005) 8. [看不懂来打我，vue3如何将template编译成render函数](https://juejin.cn/post/7356154581208072226) 9. [面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？](https://juejin.cn/post/7358709354425090083) 10. [你不知道的v-model](https://juejin.cn/post/7360663978647404559) 11. [vue3早已具备抛弃虚拟DOM的能力了](https://juejin.cn/post/7364764922338934818) 12. [vue3编译优化之“静态提升”](https://juejin.cn/post/7368355894708994088) 13. [终于搞懂了！原来 Vue 3 的 generate 是这样生成 render 函数的](https://juejin.cn/post/7370138993064067124) 14. [彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用](https://juejin.cn/post/7373502637730332706) 15. [终于搞懂了！原来vue3中template使用ref无需.value是因为这个](https://juejin.cn/post/7376930488738611240) 16. [有点东西，template可以直接使用setup语法糖中的变量原来是因为这个](https://juejin.cn/post/7379569983128862735) 17. [有点儿神奇，原来vue3的setup语法糖中组件无需注册因为这个](https://juejin.cn/post/7382039232380731392) 18. [终于搞懂了！原来vue3.4的:title等同于:title="title"原来是因为这个](https://juejin.cn/post/7383264553721626659) 19. [掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上）](https://juejin.cn/post/7384633860520083508) 20. [掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（下）](https://juejin.cn/post/7386875278423982115) # 前言众所周知，在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性`data-v-x`，同时会给组件内CSS选择器添加对应的属性选择器`[data-v-x]`。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器`[data-v-x]`。注：本文中使用的vue版本为`3.4.19`，`@vitejs/plugin-vue`的版本为`5.0.4`。 [加入欧阳的高质量vue源码交流群、欧阳平时写文章参考的多本vue源码电子书](https://vue-compiler.iamouyang.cn/guide/contact.html) # 看个demo 我们先来看个demo，代码如下：经过编译后，上面的demo代码就会变成下面这样：从上面的代码可以看到在div上多了一个`data-v-c1c19b25`自定义属性，并且css的属性选择器上面也多了一个`[data-v-c1c19b25]`。可能有的小伙伴有疑问，为什么生成这样的代码就可以避免样式污染呢？ `.block[data-v-c1c19b25]`：这里面包含两个选择器。`.block`是一个类选择器，表示class的值包含`block`。`[data-v-c1c19b25]`是一个属性选择器，表示存在`data-v-c1c19b25`自定义属性的元素。所以只有class包含`block`，并且存在`data-v-c1c19b25`自定义属性的元素才能命中这个样式，这样就能避免样式污染。并且由于在同一个组件里面生成的`data-v-x`值是一样的，所以在同一组件内多个html元素只要class的值包含`block`，就可以命中`color: red`的样式。接下来我将通过debug的方式带你了解，vue是如何在css中生成`.block[data-v-c1c19b25]`这样的属性选择器。 # @vitejs/plugin-vue 还是一样的套路启动一个debug终端。这里以`vscode`举例，打开终端然后点击终端中的`+`号旁边的下拉箭头，在下拉中点击`Javascript Debug Terminal`就可以启动一个`debug`终端。 ![debug-terminal](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3e16f0791994486b10bca13d585b246~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2160\&h=705\&s=120584\&e=png\&b=191919) 假如`vue`文件编译为`js`文件是一个毛线团，那么他的线头一定是`vite.config.ts`文件中使用`@vitejs/plugin-vue`的地方。通过这个线头开始`debug`我们就能够梳理清楚完整的工作流程。 ![vite-config](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b520617debfb4b889ccbabdc088ae6bc~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1188\&h=876\&s=195616\&e=png\&b=1f1f1f) ## vuePlugin函数我们给上方图片的`vue`函数打了一个断点，然后在`debug`终端上面执行`yarn dev`，我们看到断点已经停留在了`vue`函数这里。然后点击`step into`，断点走到了`@vitejs/plugin-vue`库中的一个`vuePlugin`函数中。我们看到简化后的`vuePlugin`函数代码如下： function vuePlugin(rawOptions = {}) { return { name: "vite:vue", // ...省略其他插件钩子函数 transform(code, id, opt) { // .. } }; } `@vitejs/plugin-vue`是作为一个`plugins`插件在vite中使用，`vuePlugin`函数返回的对象中的`transform`方法就是对应的插件钩子函数。vite会在对应的时候调用这些插件的钩子函数，vite每解析一个模块都会执行一次`transform`钩子函数。更多vite钩子相关内容[查看官网](https://cn.vitejs.dev/guide/api-plugin#universal-hooks)。我们这里只需要看`transform`钩子函数，解析每个模块时调用。由于解析每个文件都会走到`transform`钩子函数中，但是我们只关注`index.vue`文件是如何解析的，所以我们给`transform`钩子函数打一个条件断点。如下图： ![conditional-breakpoint](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef9a842de48c4122904320bcbbfe402e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1304\&h=380\&s=82481\&e=png\&b=1f1f1f) 然后点击Continue(F5)，`vite`服务启动后就会走到`transform`钩子函数中打的断点。我们可以看到简化后的`transform`钩子函数代码如下： function transform(code, id, opt) { const { filename, query } = parseVueRequest(id); if (!query.vue) { return transformMain( code, filename, options.value, this, ssr, customElementFilter.value(filename) ); } else { const descriptor = getDescriptor(filename); if (query.type === "style") { return transformStyle( code, descriptor, Number(query.index || 0), options.value ); } } } 首先调用`parseVueRequest`函数解析出当前要处理的文件的`filename`和`query`，在debug终端来看看此时这两个的值。如下图： ![query](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55ec331d93c742a39e36fd5e6a40e879~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1294\&h=270\&s=38440\&e=png\&b=191919) 从上图中可以看到`filename`为当前处理的vue文件路径，`query`的值为空对象。所以此时代码会走到`transformMain`函数中。 ## `transformMain`函数将断点走进`transformMain`函数，在我们这个场景中简化后的`transformMain`函数代码如下： async function transformMain(code, filename, options) { const { descriptor } = createDescriptor(filename, code, options); const { code: templateCode } = await genTemplateCode( descriptor // ...省略 ); const { code: scriptCode } = await genScriptCode( descriptor // ...省略 ); const stylesCode = await genStyleCode( descriptor // ...省略 ); const output = [scriptCode, templateCode, stylesCode]; let resolvedCode = output.join("\n"); return { code: resolvedCode, }; } 我们在 [通过debug搞清楚.vue文件怎么变成.js文件](https://mp.weixin.qq.com/s/0QfalimbwontX3UhSHMZng)文章中已经深入讲解过`transformMain`函数了，所以这篇文章我们不会深入到`transformMain`函数中使用到的每个函数中。首先调用`createDescriptor`函数根据当前vue文件的code代码字符串生成一个`descriptor`对象，简化后的`createDescriptor`函数代码如下： const cache = new Map(); function createDescriptor( filename, source, { root, isProduction, sourceMap, compiler, template } ) { const { descriptor, errors } = compiler.parse(source, { filename, sourceMap, templateParseOptions: template?.compilerOptions, }); const normalizedPath = slash(path.normalize(path.relative(root, filename))); descriptor.id = getHash(normalizedPath + (isProduction ? source : "")); cache.set(filename, descriptor); return { descriptor, errors }; } 首先调用`compiler.parse`方法根据当前vue文件的code代码字符串生成一个`descriptor`对象，此时的`descriptor`对象主要有三个属性`template`、`scriptSetup`、`style`，分别对应的是vue文件中的`