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靜態資源目錄內。