likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 5

前言

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

太细了!

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

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

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

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

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

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

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

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

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

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

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

简单看源码

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

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

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

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

开发环境 & 生产环境

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

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

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

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

如何防样式冲突?

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

大佬牛啊!!!

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

结语 & 加学习群 & 摸鱼群

我是林三心

转载自:https://juejin.cn/post/7354021064031076388
评论
请登录