vue:单页应用style样式层次分析及处理

刚开始使用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内添加样式文件来控制。相信单页应用要精准控制样式绝对不是难事。

作者：小飞牛牛
链接：https://www.jianshu.com/p/4af980c7d77c