Vue3 scoped 隔离样式的秘密……

文章预览

前言 众所周知，在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 。 看个demo 我们先来看个demo，代码如下：    "block">hello world
.block {
  color: red;
}
经过编译后，上面的demo代码就会变成下面这样：    "block">hello world
.block[data-v-c1c19b25] {
  color: red;
}
从上面的代码可以看到在div上多了一个 data-v-c1c19b25 自定义属性，并且css的属性选择器上面也多了一个 [data-v-c1c19b25] 。 可能有的小伙伴有疑问，为什么生成这样的代码就可以避免样式污染呢？ .block[data-v-c1c19b25] ：这 ………………………………