vue - 生命周期

开发过程中，用vue会比较多，我们经常用mounted，这类函数其实就是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

写在最后

生命周期，可能一开始的时候没有觉得会很常用到，但是当项目做久之后，会发现理解生命周期是多么重要的～