Vue_生命周期钩子函数

Vue_生命周期

生命周期就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段

1. 创建实例
2. 初始化阶段
3. 运行阶段
4. 销毁实例
   

Vue_钩子函数

1. beforeCreate – 创建前
触发行为: vue实例的挂载元素$el和数据对象data都为undefined, 还未初始化
此阶段可以做到事: 加 loading事件

2. created – 创建后
触发行为: vue实例的数据对象data有了, $el还没有挂载
此阶段可以做的事: 解决 loading事件, 请求ajax数据为mounted渲染前做准备

3. beforeMount – 渲染前
触发行为: vue实例的$el和data数据都初始化了, 但还是虚拟dom节点, 具体的data.filter还未替换

4. mounted – 渲染后 (初始化最后一个函数)
触发行为: vue实例挂载完成, data.filter成功渲染
此阶段可以做的事: 配合路由钩子使用

5. beforeUpdate – 更新前
触发行为: data更新触发, 在此函数里面获取更改的数据, 是之前的数据

6. updated – 更新后
触发行为: data更新触发, 在此函数里面获取更改的数据, 是最新的数据
此阶段可以做的事: 数据更新时, 做的一些处理 (此处也可以使用 watch进行观测)

7. beforeDestroy – 销毁前
触发行为: 组件销毁前触发
此阶段可以做的事: 可向用户询问是否销毁

8.destroy – 销毁后
触发行为: 组件销毁时触发, vue实例解除了事件监听以及dom的绑定 (无响应了) , 但DOM节点依然存在
此阶段可以做的事: 组件销毁时进行提示

Editted by: kiat
——还在摸爬滚打中的前端小萌新