VUE中的/deep/用法

VUE中的/deep/用法

前端沧海关注

七夕了，写个昨天遇到的bug来缓解下没有人约的尴尬。

昨天和QA过历史bug时，发现有好几个浏览器不兼容的导致式样变形的bug，调查了一番发现是因为deep选择器的原因。

在说bug之前，先看看vue官方是如何说明deep的用法的。

为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码会被编译成

.a[data-v-f3f3eg9] .b { /* ... */ }

vue官方对于deep选择器的说明

这么写是没有问题的，但是实际项目中，还有人深度嵌套的写法

<style lang="scss" scoped>
.a /deep/ .b {
  ......
  /deep/ .c {
    ....
  }
}
</style>

生成的代码如下

.a[data-v-32bcae5c] .b {
  ......
}
.a[data-v-32bcae5c] .b /deep/ .c {
    ......
}

在Chrome浏览器下是没有问题的，但是在其他浏览器上就完全不可行了

.a[data-v-32bcae5c] .b /deep/ .c {
    ......
}

上面这部分代码完全失效了，为什么尼？

因为/deep/选择器这个是chrome浏览器自己的标准，其他浏览器并没有实现这个标准，所以其他浏览器是失效的。

有意思的是，google说会在chrome的63这个版本，移除/deep/的支持，不知道为啥现在最新的还是会有？

17年google说要废弃/deep/

既然问题知道了，bug自然就好解决了，不要用/deep/嵌套就好了。

vue官方也说了，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍，当然这种写法对于程序员来说是最友好的。

渲染测试

之前写react时用的是CSS Modules，他比较麻烦的是需要导入一个变量，其他的一切完美，vue也提供了支持，新项目还是用CSS Modules吧，解决更彻底。

vue的CSS Modules解决方案

参考文档

关于deep的stackoverflow

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。