刚开始使用vue的时候容易被里面的样式搞懵：
样式可以在main.js中引入，在模块js文件中引入，在组件中的style标签引入，在组件中的script标签引入，还可以在index.html的body中引入。
我不禁要问:
1.从不同位置引入的样式到底是什么关系？
2.在实际定义样式时应该定义在哪个位置，以避免样式产生的冲突？
笔者之前有份工作是一名进口电子产品的测试员，不仅要阅读英文电子产品的说明书，还要对产品功能进行测试，搞清楚使用方法，编写中文产品说明书。
得益于这份测试工作，我发现测试的过程其实就是在学习：
看文档是“学”，而测试是“习”。
纸上得来终觉浅，绝知此事要躬行。看十次文档，不如做一个测试。做十个测试，不如分析一次源代码。分析十遍不如你自己写一个。
我们不妨新建一个vue项目来做个测试：
新建项目并运行：
vue init webpack vue-style-test
npm install
npm run start
如果你人品没问题，会看到弹出的浏览器中，head标签内有这样的style
搜狗截图17年10月19日0930_1.png
在项目src目录中找找看：
第一个style在\src\App.vue文件的style中
第二个style在\src\components\HelloWorld.vue文件中
App.vue包含HelloWorld.vue，因此页面先加载App.vue的style,再加载HelloWorld.vue的style。看起来很简单，先加载的会先出现，根据页面样式的规则，如果有相同的类定义，后者会覆盖前者。
但是我想就开头出现的问题了解得更深入。
为避免多个问题纠缠在一起，我逐个去分析：
一、加载顺序的问题
为方便看到测试的结果，我改造一下项目：
QQ截图20171019101040.png
QQ截图20171019101231.png
我只须关注main.js,App.vue,ComA.vue这三个文件的样式加载，因此删除了其它无关的内容，再来看浏览器：
QQ截图20171019101835.png
结果有点奇怪，先加载app.css,再加载com_a.css,再加载main.css,为什么呢？我们来看看main.js是怎么定义的：
QQ截图20171019101911.png
原来main.js里先引入了App.vue文件，所以它先执行App.vue里的script,从而引入了app.css
随后引入router,router里引入了ComA.vue，继而加载com_a.css
加载完App.vue后才按顺序加载main.css,于是有了上面的结果。
而所有组件的style都是script里的代码执行完后再加载。
所以我大致可以得出结论：
样式从main.js入口开始顺序加载
遇到组件则加载组件中script所引入的样式
先处理完所有scipt中的引入，再处理style
style按包含关系从外到内加载
但是问题还没完，我又得出另外的问题：
这些页面都是固定的，如果是异步加载页面，当路由切换到另一个页面时，此页面原来的样式是否会删除，当前页面的样式会添加到哪里？
为此我又再路由中添加了ComB.vue，并且使用异步加载该组件。
QQ截图20171019105305.png
再查看浏览器：
QQ截图20171019105625.png
可以看到，浏览器先加载1.js组件文件，然后执行script加载com_b.css,再加载ComB.vue的style,
而当我切换回ComA页面时，head标签内的样式不再有变化。
另外，当我更改路由，使ComA不再在根路径显示，ComA就只加载com_a.css,而不会加载ComA的style,只有ComA页面显示出来时才加载。
QQ截图20171019110615.png
如果ComA和ComB都是异步组件，则先打开哪一页就加载哪一页的script和style
QQ截图20171019111201.png
再定义一个ComAA,在ComA中引入，但不显示，则ComAA只显示com_a_a.css，但不显示style
QQ截图20171019113348.png
至此，加载顺序应再加两条规则：
异步组件先显示的先加载
没有显示的页面或者组件不加载style
下面再关注另一个问题
二、scoped的处理
使用scoped定义的样式与不使用有什么区别？
如果父组件和子组件的样式重叠，后出现的会覆盖先出现的。如图，最后结果背景色为黄色。
QQ截图20171019114323.png
而如果加了scoped，打包时会在该类中增加一个data-v-xxxxxx的编码作为限定属性，通过这个属性屏蔽父组件的相同类。但如果父组件中定义的样式，子组件没有覆盖，则子组件会继承该样式，如图中App.vue的.common-s1的color样式。
QQ截图20171019114843.png
如果父组件和子组件都用scoped,则子组件会有父组件的限定属性，从而将样式的层次结构区分开。
QQ截图20171019115354.png
另外，一个组件内可以定义不止一个style,并且有scoped的style和没有scoped的style可以并存，它们会按照所定义的顺序加载。
QQ截图20171019120047.png
三、写在body内的样式
笔者发现，通过main.js控制的样式都在head标签中显示，由此就可以知道，如果我在body内定义样式，是可以把head标签内的同名样式覆盖掉的。
但要注意的是，在body内引入的样式，因为已经不在main.js控制范围内，也就是不参与打包，所以必须定义在static静态资源目录内。
同时要注意，在body引入的样式不在src文件夹内，没有热更新的功能，所以每次更改后需要手动刷新页面。
例如：
QQ截图20171019121619.png
总结
经过以上的测试，可以得知style出现的顺序跟你定义的位置，是否异步组件，初始状态是否显示有关。而样式的覆盖又可以通过添加scoped和在body内添加样式文件来控制。相信单页应用要精准控制样式绝对不是难事。
网友评论