Vue 的 style 加了 scoped 也会样式冲突?可怕!

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

太细了!

最近在看一篇微前端的文章的时候,看到了这么一个评论,瞬间引起了我的求知欲,这个评论是这样的

可能有些人不知道微前端是啥,也不知道 主应用子应用 是啥,我画一个图给大加简单展示一下吧:

在这里再说一下 vue 文件的 scoped style 是怎么做到样式隔离的,其实就是 vue解析器 在解析 vue 文件的时候,会通过内部的一种计算方法(怎么算的后面会说),给每一个 vue 文件的 html 标签加上 data-v-xxx 这样的属性,接着通过 属性选择器 ,来进行样式隔离,也叫样式模块化

回到刚刚那个问题,微前端项目中的 主项目子项目 由于存在了相同相对路径的 vue 文件,导致了两个项目的两个 vue 文件的样式产生了冲突~

所以,我们可以初步知道了,data-v-xxx这个属性是根据 vue文件相对路径去计算出来的。但这也只是初步而已,具体我们还得去看一下源码才行,这样才能锻炼我们解决问题的能力~

Vue2 和 Vue3 的计算方式大差不差

简单看源码

先来看看 Webpack + vue-loaderVue2 是怎么处理的,源码链接:github.com/vuejs/vue-l...

再来看看 vite + @vitejs/plugin-vue 对于 Vue3是怎么处理的,源码链接:github.com/vitejs/vite...

开发环境 & 生产环境

其实两种的解析方式大差不差,总结为以下:

  • 开发环境: 根据文件的相对路径进行计算data-v-xxx
  • 生产环境: 根据与文件的相对路径 + 文件内容进行计算 data-v-xxx

所以可以看出在开发环境和生产环境的时候,都有可能两个 vue 文件的 scoped style 样式发生冲,虽然这只是比较边界的情况~

为什么生产环境不把文件内容加入计算呢?我想应该是因为开发阶段文件内容变化的比较频繁,所以如果把文件内容加入计算的话,势必会造成构建时间的加长。

如何防样式冲突?

虽然 scoped style 发生样式冲突只是小概率事件,但是我们也得思考一下怎么去避免呢?

掘金有一个大佬,给 Vue 官方提了一个 PR,就是在计算 data-v-xxx的时候,加入 package.json 的 name进行计算,也就是项目名,这样能防止两个不同项目之间的样式冲突~

大佬牛啊!!!

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

作者:Sunshine_Lin

链接:juejin.cn/post/732791...

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关推荐
三翼鸟数字化技术团队11 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei40 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
原生高钙1 小时前
LLM大模型对话框实践:大文件的分片上传
前端