vue中created與mounted區別

vue中created與mounted的區別

關於vue.js中的生命週期，若是不是有特別的需求，通常在項目開發過程當中更多的使用created和mounted，
因此在本文中主要講解created與mounted在開發中的主要使用區別。

關於完整的生命週期，不久會在另外一篇文章中作總體的理解，包括activated、destroyed等，不過可能會有點晚，你們能夠留意一下

版本信息：

• 系統:win10
• Vue:2.5.2
• webpack:3.6.0
• npm:6.9.0
• node:10.15.3

生命週期

完整的生命週期圖示爲了不佔用板塊，這裏就不貼出來了，你們能夠自行前往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中的數據的

在beforecreate階段，實際上與created階段相似，節點還沒有掛載，可是依舊能夠獲取到data與methods中的數據。

在mounted階段，對瀏覽器來講，已經完成了dom與css規則樹的render，並完成對render tree進行了佈局，而瀏覽器收到這一指令，調用渲染器的paint（）在屏幕上顯示，而對於vue來講，在mounted階段，vue的template成功掛載在$el中，此時一個完整的頁面已經可以顯示在瀏覽器中，因此在這個階段，便可以調用節點了（關於這一點，在筆者測試中，在mounted方法中打斷點而後run，依舊可以在瀏覽器中看到總體的頁面）。

寫在最後

筆者目前也只是一個職場小白，粗略探討一下本身的見解，如有疑問，或者文章錯誤，均可以在評論中指出，咱們一塊兒討論