Vue的渲染周期是指在Vue實例被創建后,該實例經歷從數據初始化到模板編譯再到頁面渲染的過程。Vue的渲染周期包括:創建周期、更新周期和銷毀周期。這些周期一般都是自動執行的,但是在開發過程中我們也需要對其進行手動控制,以滿足不同的需求。
Vue的創建周期
new Vue({ el: '#app', data: { name: 'Vue Render' }, created: function () { console.log('實例已經創建完成!') } })
在Vue實例被創建后,會先執行created方法。在這個方法里,我們可以定義一些在實例創建之后需要執行的操作,比如異步請求數據等。需要注意的是,這個時候Vue實例還沒有被掛載到頁面上。
Vue的更新周期
new Vue({ el: '#app', data: { name: 'Vue Render' }, created: function () { console.log('實例已經創建完成!') }, mounted: function () { console.log('實例已掛載到頁面上!') }, updated: function () { console.log('頁面數據已更新!') } })
當我們在實例中改變了數據的時候,Vue會自動執行更新周期。在這個周期中,Vue會對修改過的數據進行對比,然后找出需要重新渲染的部分進行重新渲染。需要注意的是,更新周期不會被觸發的情況有兩種,一種是修改的數據沒有被使用到,另一種是數據修改后沒有引起模板中任何內容的變化。
Vue的銷毀周期
new Vue({ el: '#app', data: { name: 'Vue Render' }, created: function () { console.log('實例已經創建完成!') }, mounted: function () { console.log('實例已掛載到頁面上!') }, updated: function () { console.log('頁面數據已更新!') }, beforeDestroy: function () { console.log('實例即將被銷毀!') }, destroyed: function () { console.log('實例已經被銷毀!') } })
在Vue實例被銷毀之前,會先執行beforeDestroy方法,這時我們可以做一些清理工作,比如取消監聽、清除定時器等。之后Vue會解除與DOM的綁定關系,并銷毀實例,此時執行destroyed方法。
總結
Vue的渲染周期在Vue實例被創建后進行了一系列的渲染和更新操作,最后再銷毀實例。在實際開發過程中,我們可以通過控制這些周期的執行順序和過程,來滿足不同的需求。