VUE温习：style层次分析

1、vue样式style层次分析

一、样式能够在main.js、模块js文件、组件style、组件script标签内，index.html文件内引入，不一样位置引入的样式有什么关系。

二、总结：

　　（1）样式从main.js的入口处开始顺序加载（注意顺序的意思），

　　（2）遇到组件则加载组件script标签内引入的样式，

　　（3）先处理完全部script中引入的样式，

　　（4）再处理style，style按包含关系从外到内加载（注意这个从外到内的意思）

三、这些页面都是固定的，若是是异步加载页面，当路由切换到另外一个页面时，此页面原来的样式是否会删除，当前页面的样式会添加到哪里？

先只会加载到app.vue的style，再点击那个页面就先加载页面的js文件，而后再执行script加载script里引入的css，再加载style里的css

四、若是都是异步加载组件，会怎么样？

　　若是ComA和ComB都是异步组件，则先打开哪一页就加载哪一页的script和style

　　总结：

　　（5）异步组件先显示的先加载，

　　（6）没有显示的页面或组件不加载style

五、一个组件内能够定义不止一个style，而且有scoped的style和没有scoped的style能够并存，它们会按照所定义的顺序加载（注意顺序加载的意思），并跟普通CSS拥有同样的权重优先机制。

六、经过main.js进入的样式是在head中显示，因此若是咱们再body中定义样式是能够把head标签内的同名样式覆盖掉的，可是要注意的是在body内引入的样式，由于已经不在main.js控制范围内，也就是不参与打包，因此必须定义在static静态资源目录内。