vue中created與mounted的區別
關於vue.js中的生命周期，如果不是有特別的需求，一般在項目開發過程中更多的使用created和mounted，
所以在本文中主要講解created與mounted在開發中的主要使用區別。
關於完整的生命周期，不久會在另一篇文章中做整體的理解，包括activated、destroyed等，不過可能會有點晚，大家可以留意一下
生命周期
完整的生命周期圖示為了避免占用板塊，這里就不貼出來了，大家可以自行前往vue生命周期查看。
瀏覽器渲染過程
具體的瀏覽器渲染過程我會過幾天另外寫一遍文章，大家可以去我的文章看看。
- 構建DOM樹
- 構建css規則樹,根據執行順序解析js文件。
- 構建渲染樹Render Tree
- 渲染樹布局layout
- 渲染樹繪制
生命周期中的瀏覽器渲染
這里是官方文檔對生命周期api的解釋，大家可以看看
以下為測試vue部分生命函數
beforeCreate(){
console.log('beforecreate:',document.getElementById('first'))//null console.log('data:',this.text);//undefined this.sayHello();//error:not a function }, created(){ console.log('create:',document.getElementById('first'))//null console.log('data:',this.text);//this.text this.sayHello();//this.sayHello() }, beforeMount(){ console.log('beforeMount:',document.getElementById('first'))//null console.log('data:',this.text);//this.text this.sayHello();//this.sayHello() }, mounted(){ console.log('mounted:',document.getElementById('first'))//<p></p> console.log('data:',this.text);//this.text this.sayHello();//this.sayHello() }通過上述測試我們可以知道，
| 生命周期 | 是否獲取dom節點 | 是否可以獲取data | 是否獲取methods |
|---|---|---|---|
| beforeCreate | 否 | 否 | 否 |
| created | 否 | 是 | 是 |
| beforeMount | 否 | 是 | 是 |
| mounted | 是 | 是 | 是 |
以我的個人理解，vue生命周期實際上和瀏覽器渲染過程是掛鈎的，
在beforecreate階段，對瀏覽器來說，整個渲染流程尚未開始或者說准備開始，對vue來說，實例尚未被初始化，data observer和 event/watcher也還未被調用，在此階段，對data、methods或文檔節點的調用現在無法得到正確的數據。
在created階段，對瀏覽器來說，渲染整個HTML文檔時,dom節點、css規則樹與js文件被解析后，但是沒有進入被瀏覽器render過程，上述資源是尚未掛載在頁面上，也就是在vue生命周期中對應的created
階段，實例已經被初始化，但是還沒有掛載至$el上，所以我們無法獲取到對應的節點，但是此時我們是可以獲取到vue中data與methods中的數據的
在beforeMount階段，實際上與created階段類似，節點尚未掛載，但是依舊可以獲取到data與methods中的數據。
在mounted階段，對瀏覽器來說，已經完成了dom與css規則樹的render，並完成對render tree進行了布局，而瀏覽器收到這一指令，調用渲染器的paint（）在屏幕上顯示，而對於vue來說，在mounted階段，vue的template成功掛載在$el中，此時一個完整的頁面已經能夠顯示在瀏覽器中，所以在這個階段，即可以調用節點了（關於這一點，在筆者測試中，在mounted方法中打斷點然后run，依舊能夠在瀏覽器中看到整體的頁面）。