彻底搞懂 Vue 中的 scoped 原理和 /deep/ 深度选择器原理

背景

我们做 Vue 项目在组件里写 css 的时候,经常会给 <style> 标签加上 scoped ,比如这样: <style lang="less" scoped> ,这样写出来的 css 就是局部的,不会影响其他组件。

另外,假设我们在自己的组件中引入了一个子组件,并且希望在我的组件中修改子组件中的样式,由于我们用了 scoped,直接修改是不生效的。去掉 scoped 是可以的,不过没了局部 css 风险不可控。有一种更好的方式,用深度选择器修改,比如 less 中的 /deep/ 。用过组件库(如element ui)的朋友,在覆盖组件库样式的时候应该会经常用到深度选择器 /deep/

基于以上两点,我们来聊一聊:

  1. 为什么 scoped 可以形成局部 css ?原理是什么?
  2. 为什么 /deep/ 可以跨组件修改 css ?原理是什么?

scoped 形成局部 css 原理

先看一张图:

我们审查 html 元素时发现多了很多类似 data-v-f321cf6 属性,这些属性其实就是 scoped hash 出来的。

再来看一张页面生成的 css 截图:

仔细看第一张图标记了两种颜色,他们分别对应两种 hash 属性值:data-v-f5321cf6data-v-6a6ef68c ,其实这里就是两个不同的组件生成的两个不同的值,每个加过 scoped 的组件生成的值都是唯一的。

结合两张图,不难发现 scoped 形成局部 css 的原理其实很简单,就是先给元素加上 hash 出来的属性,再通过属性选择器来选择这些元素,由于每个组件 hash 出来的属性值都是唯一的,css 属性选择器选出来的元素当然也是组件级的了,因为形成了组件内局部 css 。(如果你还不了解 css 属性选择器,可以看一下这里

/deep/ 跨组件修改 css 原理

一个例子

一个列表页面 ,需要在数据为空的时候展示空白页,这个空白页我们引入的是第三方组件库的空白页组件<no-data>

假设我们现在要修改空白页组件中图片的宽高,<no-data>不支持传入宽高,并且我们无法改动这个第三方组件,只能在列表页通过 css 覆盖空白页组件的样式。

我们第一时间想到改样式嘛,这还不简单,于是写下:

xml 复制代码
<style lang="less" scoped>
.no-data{
    img {
        width: 200px;
        height: 200px;
    }
}
</style>

自信满满的点开浏览器查看效果,发现设置的宽高并没起到作用,空白页图片还是默认的偏大。

仔细一想,父组件用了 scoped 是不能直接改子组件内样式的,得用 /deep/ ,于是乎有了下面的代码:

xml 复制代码
<style lang="less" scoped>
.no-data{
    /deep/img {
        width: 200px;
        height: 200px;
    }
}
</style>

再查看效果:

生效了,图片小了很多!

我们再来审查一下页面渲染出来的代码,没加 /deep/ 的:

注意看 css 部分,这里的选择器是 .acl-nodata img[data-v-6a6ef68c],这里的 data-v-6a6ef68c 属性是 <no-data> 组件中的 scoped 生成的。

接着往下看,加上 /deep/ 后的:

还是重点看 css 部分,这里的选择器是 .integral-detail .no-data[data-v-f5321cf6] img,这里的 data-v-f5321cf6 是列表页的 scoped 生成的。

核心区别在于:img[data-v-6a6ef68c].no-data[data-v-f5321cf6] img

/deep/ 原理

通过上面的例子,我们可以分析出,在使用了 /deep/ 选择器后,会把当前元素 img[data-v-6a6ef68c] 干掉,并通过他的父级(准确的说是 img 元素所属空白页组件的根元素 <div class="no-data"></div> ),来查找到 img ,也就是通过 .no-data[data-v-f5321cf6] img 来定位到 img 元素。

因为我们的代码是在列表页写的,列表页 hash 出来的属性是 [data-v-f5321cf6] ,在我们使用 /deep/ 之前,imghash[data-v-6a6ef68c],在列表页中的 css 代码当然是识别不到空白页组件的 [data-v-6a6ef68c] ,所以修改宽高不生效。使用 /deep/ 之后,通过 .no-data[data-v-f5321cf6] img,由于 [data-v-f5321cf6] 本身就是列表 hash 出来的,自然是可以识别的,修改宽高自然也就生效了。

为了加深理解,这里再提一点,仔细看 <div class="no-data"></div> 这一块的 html 代码,你会发现它是同时具有 [data-v-f5321cf6][data-v-6a6ef68c]两种属性,因为 <no-data> 组件的根元素是 <div class="no-data"></div>,在列表页引入 <no-data><div class="no-data"></div> 也相当于是列表中的一个元素,所以 scoped 也会给它 hash[data-v-f5321cf6]。 (这一块在实际开发中,有些朋友会搞一些骚操作,比如在父组件和子组件同时改 .no-data

相关推荐
石金龙1 小时前
[译] Composition in CSS
前端·css
天天扭码2 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153172 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
用户51681661458413 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦3 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He3 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ8 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊8 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码9 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
会豪10 小时前
CSS 动画属性精讲:从基础到实战
前端·css