window.onload在文檔加載完成後執行
驗證a 、b兩點疑惑：
a.<script src="./main.js"></script>中的window.onload是在html全部加載完了才執行，還是其在html中所處位置之前的加載完就執行？
b. <script src="./main.js"></script>中window.onload有和沒有 的區別是什麽？
結論：
a.
answer：在html全部加載完了才執行。
b.
answer：區別就是，window.onload是html頁面的所有文檔都加載完畢後，執行window.onload裏的內容。因而加了window.onload的main.js不論在html的哪個位置引入，均不會出現html元素找不到的錯誤 。
以下為驗證全過程：
代碼結構預覽
main.js :
window.onload=function(){ var app=new Vue({ el:"#app-4", data:{ todos:[{ text:"first one" },{ text:"second one" },{ text:"third one" }] } }) alert("app did!") }
index.html :
<html> <head> <title>xx</title> <script src="./vue.js"></script> <script src="./main.js"></script> <a href="./vue.js"></a> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> </body> </html>
執行過程（按chrome中真實的執行順序羅列）
1.
2.
說明：是先走到main.js裏的window.onload，之後再顯示出html的其余部分。
========================================================================================================
//現在將html的<script src="./main.js"></script>代碼位置稍作調整,為謹慎起見，增加一行<div>html中Dom的加載。。。</div>
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <a href="./vue.js"></a> </head> <body> <div>html中Dom的加載。。。</div> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script src="./main.js"></script> </body> </html>
1.
2.
說明：有window.onload的main.js在哪裏引入都一樣。【註意:均不會出現html元素找不到的錯誤】
=========================================================================
以上說述，是main.js中有window.onload時。
=========================================================================
// 現在,將window.onload去掉!!!
=========================================================================
以下所述，是main.js中沒有window.onload時。
=========================================================================
main.js :
// window.onload=function(){ var app=new Vue({ el:"#app-4", data:{ todos:[{ text:"first one" },{ text:"second one" },{ text:"third one" }] } }) alert("app did!") // }
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <script src="./main.js"></script> <a href="./vue.js"></a> </head> <body> <div>html中Dom的加載。。。</div> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> </body> </html>
1.
2.
說明：先加載的main.js中的內容，此時html並沒有加載完（後面需要顯示的內容還沒有加載）【註意:此時，出現html元素找不到的錯誤（2.圖）】
=============================================================
//將index.html中的<script src="./main.js"></script>代碼位置稍作調整
index.html :
<!DOCTYPE html> <html> <head> <title>xx</title> <script src="./vue.js"></script> <a href="./vue.js"></a> </head> <body> <div>html中Dom的加載。。。</div> <div id="app-4"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script src="./main.js"></script> </body> </html>
1.
2.
說明：html加載完（後面需要顯示的內容還沒有加載），之後加載main.js中的內容【此時，與有window.onload時的場景下，呈現順序一致】
window.onload在文檔加載完成後執行