VUE中的/deep/用法
VUE中的/deep/用法
前端沧海关注
2019.08.07 21:06:09字数 489阅读 81
七夕了，写个昨天遇到的bug来缓解下没有人约的尴尬。
昨天和QA过历史bug时，发现有好几个浏览器不兼容的导致式样变形的bug，调查了一番发现是因为deep选择器的原因。
在说bug之前，先看看vue官方是如何说明deep的用法的。
为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码会被编译成
.a[data-v-f3f3eg9] .b { /* ... */ }
这么写是没有问题的，但是实际项目中，还有人深度嵌套的写法
<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/的支持，不知道为啥现在最新的还是会有？
既然问题知道了，bug自然就好解决了，不要用/deep/嵌套就好了。
vue官方也说了，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍，当然这种写法对于程序员来说是最友好的。
之前写react时用的是CSS Modules，他比较麻烦的是需要导入一个变量，其他的一切完美，vue也提供了支持，新项目还是用CSS Modules吧，解决更彻底。
