浅谈Vue生命周期函数

Vue的生命周期函数

vue生命周期：vue组件从创建到销毁，经历的过程

​ 生命总共分为4大阶段创建前/后、载入前/后、 更新前/后、销毁前/后

一共有8个方法（函数）

创建前后

1.在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。

beforeCreate（创建vue实例前的钩子函数，相当于是vue组件出生之前，此函数用的比较少）

2.在created阶段，vue实例的数据data有了，el还没有挂载。

created（实例创建完成之后的钩子函数 ，最适合发送请求，Ajax等 ）

注：创建阶段：主要是处理数据（主要：对数据进行挟持，把data对象上的数据挂到了this实例上）！！

挂载前后

1.在beforeMount阶段，vue实例的$el和data都初始化了,但还没有挂载之前都是虚拟的demo阶段,data.message还未替换.

beforeMount（开始挂载编译生成的HTML到对应的位置时触发的钩子函数，此时还没有将编译出的html渲染到页面上，el已经初始化，但还没有渲染DOM）

2.在mounted阶段,vue实例挂载完后,data.message成功渲染.

mounted（将编译好的html挂载到页面完成后执行的钩子函数，此时可以进行发送ajax请求获取数据的操作进行数据初始化，注意：mounted在整个实例生命内只执行一次，最适合操作Dom的函数，渲染DOM完成）

注：挂载阶段：主要是合成数据和视图模板，先在内存完成虚拟dom解析，最后一次dom操作直接更新到页面。

更新前/后

1.当data变化后,针对视图发生更新前触发beforeUpdata方法

2.当data变化后,针对视图发生更新后触发updata方法。

注：更新阶段：主要是完成对视图的动态修改。

销毁前/后

此销毁表示离开此组件（路由切换）

1.beforeDestroy，vue实例销毁之前执行的钩子函数

2.destroyed实例销毁执行的钩子函数

在执行destroyed方法后，对data的改变不会再触发周期函数，说明此时vue实例已经结束了事件监听以及和dom的绑定，但是dom结构依然存在。

注：销毁阶段：主要是完成对组件的回收。

注：实际中用的最多的是created和mounted