谈谈我对Vue钩子函数、生命周期的理解

写在前面： Vue因其基于MVVM模式，降低了代码的耦合度，提高视图或者逻辑的重用性，已经成为前端框架的主流，不少同学都在学习Vue，本篇文章将简单谈谈我对Vue较为抽象的一些概念的粗略理解。

生命周期函数就是vue实例在某一个时间点会自动执行的函数。即钩子函数。 所以， 生命周期钩子 = 生命周期函数 = 生命周期事件

关于一些名词解释：

mount:挂载，和el的作用差不多，挂载数据，mount是手动挂载，el是自动挂载。都是为了将实例化后的vue挂载到指定的dom元素中。

如果在实例化vue的时候指定el（代码给定el的值)，如：

var vm = new Vue({
    el:'#app'
}))

则该vue实例将会渲染此el到对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载

<template></template>：根元素，渲染模板标签。

华丽的分割线

我在网上找到的一份将Vue生命周期写的很详细的图片(作者：mqingo)，本图是在官网的基础上进行的修改 Vue官网图片链接： 点我看官网图

我在网上找到的一份将Vue生命周期写的很详细的图片，本图是在官网的基础上进行的修改

• beforeCreate: Vue实例被创建，el、methods和data未初始化
• created：date和methods初始化完成，el 并未初始化 ，说明初始化已经完成。
• beforeMount:模板编译完成，页面还没有进行挂载,完成了 el 和 data 初始化 ,Vue开始编辑模板,若检测到代码中没有使用el自动挂载，则使用Mount手动挂载。
• mounted:已经将编译好的模板，挂载到了页面指定的容器中显示 - 运行期间的生命周期函数。

此时，Vue对象实例化已经完成，更新页面时调用beforeUpdate、Update这两个钩子函数。

• beforeUpdate:状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点.
• Update:实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，页面重新渲染完成。
• beforeDestory:Vue实例进入销毁阶段，实例销毁前被调用，但是此时实例仍然完全可用。
• Destory:Vue组件已完成销毁。