Vue钩子函数~

前言：在对比Vue和微信小程序具体用法相同点和不同时，发现，Vue的钩子函数是被遗忘的知识点。

钩子函数是什么呢？

钩子就好像把人出生到死亡分成一个个阶段，每个阶段做这个阶段的事，比如人在出生时候取名字，不会在死的时候取名字。组件也是一样，每个阶段的内部构造是不同的。弄清楚每个阶段Vue做了什么也是需要的。一般特定的钩子做特定的事。

ajax获取数据就是在 Mounted阶段。

把如下代码执行

<!DOCTYPE html>
<html>
<head>
    <title>钩子函数</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<body>
 
<div id="app">
    <p>{{ message }}</p>
    <input type="button" @click="change" value="更新数据" />
    <input type="button" @click="destroy" value="销毁" />
</div>
 
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message : "Welcome Vue"
        },
        methods:{
            change() {
                this.message = 'Datura is me';
            },
            destroy() {
                vm.$destroy();
            }
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂在的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前状态2");
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

看到vue组件在

beforeCreate

created

beforeMount

mounted  不同的表现（注释部分即是区别）。
另外，从下面截图可看出

在挂载前阶段，el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。
到后面mounted挂载的时候再把值渲染进去。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
 6 </head>
 7 <body>
 8 
 9 <div id="app">
10      <p>{{ message }}</p>
11 </div>
12 
13 <script type="text/javascript">
14     
15   var app = new Vue({
16       el: '#app',
17       data: {
18           message : "xuxiao is boy" 
19       },
20        beforeCreate: function () {
21              console.group('beforeCreate 创建前状态===============》');
22              console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
23              console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
24              console.log("%c%s", "color:red","message: " + this.message)  
25         },
26         created: function () {
27             console.group('created 创建完毕状态===============》');
28             console.log("%c%s", "color:red","el     : " + this.$el); //undefined
29             console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
30             console.log("%c%s", "color:red","message: " + this.message); //已被初始化
31         },
32         beforeMount: function () {
33             console.group('beforeMount 挂载前状态===============》');
34             console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
35             console.log(this.$el);
36             console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
37             console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
38         },
39         mounted: function () {
40             console.group('mounted 挂载结束状态===============》');
41             console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
42             console.log(this.$el);    
43             console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
44             console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
45         },
46         beforeUpdate: function () {
47             console.group('beforeUpdate 更新前状态===============》');
48             console.log("%c%s", "color:red","el     : " + this.$el);
49             console.log(this.$el);   
50             console.log("%c%s", "color:red","data   : " + this.$data); 
51             console.log("%c%s", "color:red","message: " + this.message); 
52         },
53         updated: function () {
54             console.group('updated 更新完成状态===============》');
55             console.log("%c%s", "color:red","el     : " + this.$el);
56             console.log(this.$el); 
57             console.log("%c%s", "color:red","data   : " + this.$data); 
58             console.log("%c%s", "color:red","message: " + this.message); 
59         },
60         beforeDestroy: function () {
61             console.group('beforeDestroy 销毁前状态===============》');
62             console.log("%c%s", "color:red","el     : " + this.$el);
63             console.log(this.$el);    
64             console.log("%c%s", "color:red","data   : " + this.$data); 
65             console.log("%c%s", "color:red","message: " + this.message); 
66         },
67         destroyed: function () {
68             console.group('destroyed 销毁完成状态===============》');
69             console.log("%c%s", "color:red","el     : " + this.$el);
70             console.log(this.$el);  
71             console.log("%c%s", "color:red","data   : " + this.$data); 
72             console.log("%c%s", "color:red","message: " + this.message)
73         }
74     })
75 </script>
76 </body>
77 </html>

点“更新”按钮时候，发现，更新前函数 alert两次。

然后才执行更新updated函数。

接着点“销毁”按钮，发现

beforeDestroy

destroyed执行。

如果执行顺序换下：先销毁，再点“更新”按钮，是没用的。销毁也就是把组件移除了。

举个栗子：生命周期的四个阶段就是：
beforeCreate   （loading事件）

created        （结束loading事件，做一些初始化，实现函数的自执行）
beforeMount     此时有了虚拟DOM

mounted        el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，渲染为真实DOM。 在这发起后端请求，拿回数据，配合路由钩子做些别的事

beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

Vue钩子函数~

推荐阅读