你知道Vuescoped原理吗？这波你在第几层？

⭐佛系回答

scoped 原理&＃xff1f;
不就是给那啥加一个特殊标识&＃xff0c;然后样式就被唯一标记&＃xff0c;就实现了样式隔离的作用。

⭐⭐普通回答

scoped 原理呀
当 style 标签加上 scoped 属性时&＃xff0c;scoped 会在 DOM 结构及 css 样式上加上唯一性的标记 data-v-xxx 属性&＃xff0c;从而达到样式私有化&＃xff0c;不污染全局的作用&＃xff1b;

⭐⭐⭐专业回答

嗯&＃xff01;
Scope CSS 的本质是基于 HTML 和 CSS 属性选择器&＃xff0c;即分别给 HTML 标签和 CSS 选择器添加 data-v-xxx&＃xff1b;
具体来说&＃xff0c;它是 通过 vue-loader 实现 的&＃xff0c;实现过程大致分 3 步&＃xff1a;
首先 vue-loader 会解析 .vue 组件&＃xff0c;提取出 template、script、style 对应的代码块&＃xff1b;
然后构造组件实例&＃xff0c;在组件实例的选项上绑定 ScopedId&＃xff1b;
最后对 style 的 CSS 代码进行编译转化&＃xff0c;应用 ScopedId 生成选择器的属性&＃xff1b;
⭐⭐⭐⭐大师回答
Vue scoped&＃xff0c;原理&＃xff0c;涉及到 vue-loader 的处理策略&＃xff1a;

一、首先呢&＃xff0c;是 VueLoaderPlugin 策略&＃xff1a;

VueLoaderPlugin 先获取了 webpack 原来的 rules&＃xff08; 即 compiler.option.module.rule 的比如 test:/.vue$/ 规则&＃xff09;&＃xff0c;然后创建了 pitcher 规则&＃xff0c;pitcher 中的 pitcher-loader 可以通过 resourceQuery 识别引入文件的 query 带的关键字&＃xff0c;进行 loader 解析&＃xff1b;&＃xff08;pitcher-loader 提供了前置运行和熔断运行的机制&＃xff09;

然后 VueLoaderPlugin 将进行 clonedRule&＃xff08; 即对 vueRule 以外的 rule 进行处理&＃xff09;&＃xff0c;具体是重写 resource 和 resourceQuery&＃xff0c;使得 loader 最终能匹配上文件&＃xff1b;

举例&＃xff1a;对于 vue&＃43;ts 的写法&＃xff0c;会在 vue 的 script 标签中加上 lang&＃61;&＃39;ts’&＃xff0c;重写后 fakeresourceQuery 文件路径为 xx.vue.ts&＃xff0c;然后结合 ts-loader 的 resource 过滤方法 /.tsx?$/ 匹配上文件

然后才来到&＃xff1a;vueRule 的 vue-loader 执行阶段&＃xff1b;

这里简单理解&＃xff1a;VueLoaderPlugin 就是来处理 rule 的&＃xff0c;让 loader 能够和文件匹配。处理顺序&＃xff1a;pitcher ⇒ clonedRule ⇒ vueRule

二、 有了上面的匹配文件&＃xff0c;接着来到了 vue-loader 处理环节&＃xff0c;首先 &＃64;vue/component-compiler-utils .parse 方法可以将 .vue 文件按照 template/script/style 分成代码块&＃xff0c;此时会根据文件路径和文件内容生成 hash 值&＃xff0c;并赋给 id &＃xff0c;跟在文件参数后面&＃xff1b;

// 形如 &＃96;id&＃61;7ba5bd90&＃96; &＃xff1a;
// template
import {render,staticRenderFns} from "./App.vue?vue&type&＃61;template&id&＃61;7ba5bd90&scoped&＃61;true&";
// script
import script from "./App.vue?vue&type&＃61;script&lang&＃61;js&";
// style
import style0 from "./App.vue?vue&type&＃61;style&index&＃61;0&id&＃61;7ba5bd90&scoped&＃61;true&lang&＃61;css&";



三、对于 style 代码块&＃xff0c;vue-loader 会在 css-loader 前增加 stylePostLoader&＃xff0c;stylePostLoader 正是 Vue scoped 的原理核心之一&＃xff0c;它会给每个选择器增加属性 [data-v-hash] &＃xff0c;这里的 hash 值就是上面的 id 值&＃xff1b;

四、同时&＃xff0c;对于 template 的 render 块&＃xff0c;vue-loader 的 normalizeComponent 方法&＃xff0c;判断如果 vue 文件中有 scoped 的 style&＃xff0c;则其返回的 options._ScopedId 为上面的 scopedId&＃xff1b;在 vnode 渲染生成 DOM 的时候会在 dom 元素上增增加 scopedId&＃xff0c;也就是增加 data-v-hash。

这样&＃xff0c;经过上面的过程&＃xff0c;Vue scoped 实现了 CSS 的模块私有化。

⭐⭐⭐⭐⭐ 王者回答
不知道。。。

不过&＃xff0c;&＃xff0c;&＃xff0c;这影响我单手开法拉利吗&＃xff1f;

源码附件已经打包好上传到百度云了&＃xff0c;大家自行下载即可&＃xff5e;

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd&＃61;yu27
提取码: yu27
百度云链接不稳定&＃xff0c;随时可能会失效&＃xff0c;大家抓紧保存哈。

如果百度云链接失效了的话&＃xff0c;请留言告诉我&＃xff0c;我看到后会及时更新&＃xff5e;

开源地址
码云地址&＃xff1a;
http://github.crmeb.net/u/defu

Github 地址&＃xff1a;
http://github.crmeb.net/u/defu

开源不易&＃xff0c;Star 以表尊重&＃xff0c;感兴趣的朋友欢迎 Star&＃xff0c;提交 PR&＃xff0c;一起维护开源项目&＃xff0c;造福更多人&＃xff01;