Vue生命周期函数

生命周期函数介绍：

生命周期函数是指组件从创建到销毁的过程自动执行的函数(生命周期函数是组件所经历的过程，跟代码顺序无关)。它大概可以分为3个阶段：挂载 => 更新 => 销毁。挂载分为：beforeCreate、created、beforeMount、mounted; 更新分为：beforeUpadte、updated; 销毁可以分为：beforeDestroy、destroyed；

图示：

钩子函数详解

beforeCreate

此钩子函数发生数据监测和数据代理之前，实例初始化之后被调用。在该阶段组件尚未创建，组件data的数据、methods中的方法不能访问。

created

此钩子函数发生在组件创建之后，组件创建完后调用该钩子。在该阶段组件已完成了数据、属性和方法的计算，watch/event 事件回调，但是还没渲染html模板，可以访问data数据，即可以发送请求获取数据。然而挂载阶段还没开始$el不能用。

beforeMount

此钩子函数发生在组件挂载之前，相关的函数render(模板)被调用，模板编译已结束，虚拟Dom已经存在，对Dom的操作最终都不生效。

mounted

此钩子函数发生在组件挂载完，在该阶段可以进行ref操作。至此初始化阶段结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。

beforeUpdate

此钩子函数发生在数据更新之前，此时数据是新的，但是页面时旧的；即页面尚未和数据保持同步。可以在这个钩子进行状态的变更，不会触发附加的重渲染过程。当修改vue组件的数据状态都会触发该钩子函数。

updated

此钩子函数发生在数据更新完，数据是新的页面也是新的，页面和数据保持同步。在大数情况下避免在该阶段进行数据的变更，因为可以会造成死循环。

beforeDestroy

此钩子函数发生在实例销毁之前被调用，这里的data、methods、指令等等，都处于可用状态，马上要执行销毁的过程。一般在此阶段进行定时器的关闭、取消订阅消息、解绑自定义事件等首尾操作

destroyed

此钩子函数发生在实例销毁之后调用，实例所有的东西都会解绑，所有的事件监听器都会被移除，子实例也会被销毁

vue组件各个属性执行的顺序：

props => methods => data => computed => watch