说出vue中的几种指令和他的用法_说一说VUE中的/deep/用法

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

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

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

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

上述代码会被编译成

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

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

生成的代码如下

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

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

因为/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

说出vue中的几种指令和他的用法_说一说VUE中的/deep/用法相关推荐

vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
vue 中provide的用法_说一说VUE中的/deep/用法
七夕了,写个昨天遇到的bug来缓解下没有人约的尴尬. 昨天和QA过历史bug时,发现有好几个浏览器不兼容的导致式样变形的bug,调查了一番发现是因为deep选择器的原因. 在说bug之前,先看看vue ...
java中next的用法_关于java iterator的next()方法的用法
UYOU next()是java迭代器类(Iterator)的方法,获得当前游标指向的下一个元素,详细说明和应用如下:1.迭代器(Iterator)介绍迭代器是一种设计模式,它是一个对象,它可以遍历 ...
div中的p标签于img设置同一水平_前端工程师：css中一些需要注意的东西
html标签有三大性质,如果不清楚这些东西,在使用css添花的时候可能会糊涂的不知所措. 一.块级元素块元素会独自占据一整行,或者多行,可以任意设置其大小尺寸,是用于搭建网页布局的必须部分,使网页结 ...
matlab中ode45函数的用法_带你理解Excel中COUNTIF函数的简单用法
每天5分钟,每天学一点. COUNTIF函数是Excel中最常用的统计函数之一,它的作用主要是用于根据特定条件对数据进行统计.假如,你想统计一下本周总共做了几次健身/瑜伽,或者统计上了几次培训课,那么 ...
guess在Java中用法_猜一猜，guess有哪些用法？
"I guess it just proves that in America anyone can be president." --Gerald Ford 「我的猜测证明了在美 ...
arcgis中如何导出奥维可识别的图_如何在奥维中加载ArcGIS发布的地图服务
在工作中,您可能有大量的航拍图需要在奥维中加载显示,但直接导入航拍图的数据处理量较大.对电脑硬件的要求较高.因此,您可以通过ArcGIS将航拍图发布成地图服务,在奥维中以在线自定义地图的形式加载. 1 ...
python中with open用法_在线玩转python中with用法
在本篇文章里小编给大家整理的是关于python中with用法讲解内容,有需要的朋友们可以参考下. 我们都知道打开文件有两种方法:f = open() with open() as f: 这两种方法的区 ...
中如何将方形图片转换成圆形图片_【PS】PS中不可不知的实用技巧！你都掌握了吗？...
今天给大家分享一些在PS中经常用到的实用小技巧,操作简单易上手. 01 拉伸图片人物不变形在我们在PS里想要拉伸一些图片时,里面的人物往往会跟着一起变形,那么如何改变图片比例的同时,又不影响人物的形 ...

说出vue中的几种指令和他的用法_说一说VUE中的/deep/用法

参考文档

说出vue中的几种指令和他的用法_说一说VUE中的/deep/用法相关推荐

最新文章

热门文章