vue中style的scoped属性

本文主要参考了以下大佬的成果：

https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral

https://www.mmxiaowu.com/article/5a105d5e1b60f4043271122e

https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

https://www.cnblogs.com/karthuslorin/p/9038854.html

参考了以上大佬总结的之后，我自己再总结一下我看过之后的收获。

1. 在vue中写样式的时候如果不给样式加scoped的话，就会出现在一个vue文件中修改了样式之后，在另一个vue文件中也会引用那个样式的问题。反之如果加上了scoped，那么在这个vue文件中修改的样式就只能在这个vue文件中生效。通过百度了解了一下。

    在vue项目中style的scoped属性起到了组件内样式私有化的作用，实现原理就是在DOM和CSS后追加一个由数字组成的唯一标识。

2. 解决了这个问题之后又遇到了新的问题，在已经写了scoped的style中再想去覆盖element-ui中的样式的时候则会失败，通过百度之后得知设计scoped的初衷就是为了让样式不能且不被修改。

3. 但是如果在同一个vue文件中既要覆盖element-ui中的样式，又要写自己的样式怎么办呢？

    3.1 在一个vue文件中可以写多个style标签，将需要私有化的样式写在带有scoped属性的style标签内。将允许共享的样式写到另外一个没有scoped属性的style标签内。

    3.2 利用>>>来做到scoped的穿透，但是这种方法和scoped的初衷是相反的，不建议这样写，写法如下：

     外部选择器 >>> 第三方组件选择器{ 具体样式 }

/***分割线***/

看了https://www.mmxiaowu.com/article/5a105d5e1b60f4043271122e之后得到的经验：

1. 在vue文件中最好以import的方式引入样式，如果写在vue文件中的话样式会经过vue-loader、less-leader、css-leader，这样会增加构建时间，减慢构建速度。

2. 在使用了scoped之后代码中就会多出一些随机且唯一的标识符，这样无形中增加了打包之后的文件体积。

3. soped只对文件中用到的样式起作用，一般第三方插件的样式名都是经过封装的，所以大多数不会起作用。

4. css中，属性选择器的效率是最低的，尤其是直接用元素选择器的情况下

个人比较喜欢上面链接中的作者的写法，新开一个文件夹，里边专门存放样式，然后将所有样式引入到一个js文件中，最终在app.vue文件中引入。