Vue 生命周期函数

吐槽：最近学习 Vue 的生命周期函数，有点搞不懂，为什么要叫钩子函数？？？以前了解过 React 的生命周期，开始我已经 Vue 的生命周期理解起来应该和 React 类似，但是生命周期钩子函数是什么鬼，难道是和 Vue 其它地方环环相扣，有数据交互？

了解了之后发下，没有那么复杂，其实....就是和 React 生命周期类似，还是没有懂为什么要叫钩子函数？希望有大神可以答疑

什么鬼？

好了，不皮了，下面开始正式说 Vue 生命周期钩子函数

1. 生命周期方法详解

钩子函数	详情	场景	备注
beforeCreate	实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined	可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些
created	实例创建完成后，data、methods 被初始化	结束 loading 事件；推荐这个时候发送请求数据，尤其是返回的数据与绑定事件有关时
beforeMount	挂载初始之前，完成 el 初始化，render 被初次调用	也可以发送数据请求	在服务器端渲染期间不会被调用
mounted	完成挂载	获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求	在服务器端渲染期间不会被调用
beofreUpdate	挂载开始之前调用	挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据	在服务器渲染期间不会被调用，只有初次渲染会在服务端调用
updated	由于数据更改，重新渲染界面时调用	可执行依赖于 DOM 的操作	服务器端渲染期间不会被调用
activated	keep-alive 组件激活时调用		服务器端渲染期间不会被调用
deactivated	组件停用时调用		服务器端渲染期间不会被调用
beforeDestroy	实例销毁之前调用	删除钱发出确认信息；清理定时器	服务器端渲染期间不会被调用
destroyed	实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁	提示已删除	服务器端渲染期间不会被调用
errorCaptured	当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。	修改组件状态	2.5.0新增

2. 日常举栗子：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="change()">change</button>
    <button v-on:click="destr()">destroy</button>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: 66
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data + JSON.stringify(this.$data));
            console.log("message: " + this.message)
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        mounted: function () {
            console.group('mounted 挂载结束');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        updated: function () {
            console.group('updated 更新完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        destroyed: function () {
            console.group('destroyed 销毁完成');
            console.log("el: " + this.$el);
            console.log("data: " + this.$data);
            console.log("message: " + this.message)
        },
        methods: {
            change() {
                app.message++;
            },
            destr() {
                app.$destroy();
            }
        }
    })
</script>
</body>
</html>

2.1直接加载页面，页面显示：