vue - 生命週期

寫不好程式碼的格子襯衫發表於2019-01-10
Vue

開發過程中，用vue會比較多，我們經常用mounted，這類函式其實就是vue的生命週期函式。這裡我們來看一下vue的生命週期。

生命週期

什麼是生命週期？其實就是一個物件的生老病死。

在vue中，這裡的物件就是vue的例項物件。

vue生命週期函式

首先，我們看一下vue官網給的生命週期圖。

vue的生命週期

從上面的圖可以看出，vue的生命週期，有4個過程：create，mount，update，destroy。

當然，vue這裡也做得很貼心，每個過程的鉤子有兩個，一前一後。

create

create，vue例項建立的過程，當我們new Vue()例項的時候，就會觸發create

new Vue({
    // 例項建立前
    beforeCreate: function() {
        console.log('beforeCreate')
    },
    // 例項建立後
    created: function() {
        console.log('created')
    },
})
複製程式碼

mount

mount，把vue例項掛載到dom節點時觸發的函式。

觸發mount有兩種方法

var vm = new Vue({
    // 第一種，直接在vue初始化的時候傳入el物件
    el: '#app',
    // 例項掛載前
    beforeMount: function() {
        console.log('beforeMount')
    },
    // 例項掛載後
    mounted: function() {
        console.log('mounted')
    },
})
// 第二種，呼叫vm.$mount掛載到dom節點
vm.$mount('#app')
複製程式碼

如果vue例項沒有掛載dom節點，那麼mount事件也不會觸發。

update

update，由於資料更改導致的虛擬 DOM 重新渲染和打補丁時，就是觸發該事件。

如果只修改資料，不觸發重新渲染，那麼就不會觸發update事件。

<div id="app">
    <span>{{ a }}</span>
</div>
複製程式碼
new Vue({
    el: '#app',
    data: {
        a: 1
    },
    mounted: function() {
        // 改變a的值
        this.a = 4
    },
    // 更新虛擬dom前
    beforeUpdate: function() {
        console.log('beforeUpdate')
    },
    // 更新虛擬dom之後
    updated: function() {
        console.log('updated')
    }
})
複製程式碼

destroy

vue例項銷燬時，就會觸發destroy事件。

var vm = new Vue({
    el: '#app',
    // 例項銷燬前
    beforeDestroy: function() {
        console.log('beforeDestory')
    },
    // 例項銷燬後
    destroyed: function() {
        console.log('destroyed')
    }
})
// 呼叫vm.$destroy銷燬vue例項
vm.$destroy()
複製程式碼

所以，我們總結一下，vue的整個生命週期是這樣的： create -> mount -> update -> destroy

寫在最後

生命週期，可能一開始的時候沒有覺得會很常用到，但是當專案做久之後，會發現理解生命週期是多麼重要的～

相關文章