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 实例构建如下：

 1 var app = new Vue({          
 2     el: "#app",          
 3     data: {
 4         message: "hello world"        
 5     },         
 6     beforeCreate: function() {          
 7         console.log("创建前")            
 8         console.log(this.message)            
 9         console.log(this.$el)          
10     },         
11     created: function() {
12         console.log("创建之后");            
13         console.log(this.message)            
14         console.log(this.$el)          
15     },         
16     beforeMount: function() {            
17         console.log("mount之前")            
18         console.log(this.message)            
19         console.log(this.$el)          
20     },          
21     mounted: function() {            
22         console.log("mount之后")            
23         console.log(this.message)            
24         console.log(this.$el)          
25     },          
26     beforeUpdate: function() {            
27         console.log("更新前");            
28         console.log(this.message)            
29         console.log(this.$el)          
30     },          
31     updated: function() {            
32         console.log("更新完成");            
33         console.log(this.message);            
34         console.log(this.$el)          
35     },          
36     beforeDestroy: function() {            
37         console.log("销毁前");            
38         console.log(this.message)            
39         console.log(this.$el)            
40         console.log(this.$el)          
41     },          
42     destroyed: function() {           
43         console.log("已销毁");          
44         console.log(this.message)          
45         console.log(this.$el)          
46     }   
47  });

然后在 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