Vue js 的生命周期详解

Vue 实例的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列 过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。

它可以总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

接下来我们用例子来看看生命周期钩子是怎么用的：

HTML结构：

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
    <button v-on:click="change">改变数据</button>
</div>

我们对 input 和 p 绑定了data 对象的 message 数据，Vue 实例构建如下：

var app = new Vue({          
    el: "#app",          
    data: {
        message: "hello world"        
    },         
    beforeCreate: function() {          
        console.log("创建前")            
        console.log(this.message)            
        console.log(this.$el)          
    },         
    created: function() {
        console.log("创建之后");            
        console.log(this.message)            
        console.log(this.$el)          
    },         
    beforeMount: function() {            
        console.log("mount之前")            
        console.log(this.message)            
        console.log(this.$el)          
    },          
    mounted: function() {            
        console.log("mount之后")            
        console.log(this.message)            
        console.log(this.$el)          
    },          
    beforeUpdate: function() {            
        console.log("更新前");            
        console.log(this.message)            
        console.log(this.$el)          
    },          
    updated: function() {            
        console.log("更新完成");            
        console.log(this.message);            
        console.log(this.$el)          
    },          
    beforeDestroy: function() {            
        console.log("销毁前");            
        console.log(this.message)            
        console.log(this.$el)            
        console.log(this.$el)          
    },          
    destroyed: function() {           
        console.log("已销毁");          
        console.log(this.message)          
        console.log(this.$el)          
    }   
 });  

然后在 methods 里面添加一个change方法：

methods: {
    change :function() {
        this.message = "vue.js"
    } 
}

点击按钮之后出现的是：

 

这就是vue的生命周期，很简单吧。

在实例中分别在每个生命周期钩子中 console.log('钩子名称',this.message) 我们发现，第一次页面加载时触发了 beforeCreate, created, beforeMount, mounted 这几个钩子，data 数据在 created 中可获取到。再去 console.log('mounted: ', document.getElementsByTagName('p')[0]) ，DOM 渲染在 mounted 中已经完成。

我们再试着去点击按钮更改 message 和 input 输入框中的内容，可以看到数据同步发生改变，这就是数据绑定的效果，在更新数据时触发 beforeUpdate 和 updated 钩子，且在 beforeUpdate 触发时，数据已更新完毕。

而 destroy 仅在调用app.$destroy();时触发，对 vue 实例进行销毁。销毁完成后，我们再重新改变 number 的值，vue 不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

生命周期小结

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发 
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom