Vue生命周期钩子函数

生命周期：

        页面内容的三个阶段：创建阶段、更新阶段、销毁阶段。当一个页面内容出现在App.vue中，页面进入创建阶段。当响应式数据发生变化时页面自动更新，此时进入更新阶段。最后切换页面时，旧页面消失，就是进入了销毁阶段。

        对应这三个阶段，vue提供了不同生命周期函数，也叫钩子函数。让我们可以在不同阶段对页面内容进行处理。

        创建阶段生命周期只会在组件第一次加载时执行。除非组件被卸载了，当再次进入这个页面，创建阶段的生命周期会再次执行。

生命周期图示：

beforeCreate()  :   创建阶段的第一个生命周期，它是在vue实例对象刚刚被创建出来，但还没有完成data和methods与实例对象的结合。此时this已经存在了，只不过此时的this仅仅完成了第一个阶段的初始化，实例内部的属性和方法刚刚和this实例绑定完成。

created()  :   创建阶段的第二个生命周期，它是vue实例第二个阶段初始化完成，第二个阶段主要是把咱们配置的一些data、method、computed内容挂载到this实例上。所以我们才可以通过this.属性，this.方法，this.计算属性。

这个生命周期表示this实例已经初始化完成。页面的初始化请求最早（不是唯一或必须）只能放在这里，也可以放在后面，不能放在beforeCreate中，因为它里面的this还不存在响应式数据，请求结果没地方存。

beforeMount()  :  创建阶段的第三个生命周期，vue渲染模板前执行，此时DOM还没有渲染出来.在挂载开始之前被调用.

mounted() :   创建阶段的第四个生命周期，vue渲染模板结束，此时DOM已经渲染出来。这个生命周期是最早能操作DOM的位置。

beforeUpdate() :   更新阶段的生命周期，响应式数据发生变化，页面在重新渲染前执行这个钩子。

updated() :   更新阶段的生命周期，响应式数据发生变化，页面在重新渲染后执行这个钩子。

beforeDestroy() :   vue实例销毁前调用，卸载阶段，页面卸载前，清楚一些定时器（window的）、订阅事件，因为这些不是vue的东西，只能我们手动清除。

destroyed() :  vue实例销毁后调用，该钩子在服务器端渲染期间不被调用。

个人练习，仅供参考：