前言
上一章博客我们讲解了Vue基础
这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器
一,生命周期
- 通常也叫生命周期回调函数、生命周期函数、生命周期钩子
- vue初始化时在不同的阶段调用的不同函数
- 生命周期函数的this指向为vue实例,名字不能更改
1.1,生命周期函数简介
“生命周期”指实例对象从构造函数开始执行(被创建)到被GC(Garbage Collection)回收销毁的整个存在的时期
生命周期函数是为了在实例对象的各个阶段方便开发者控制而产生,在不同的时期有不同的生命周期函数,可以利用不同时期的生命周期函数去完成不同的操作
实际的开发过程中,生命周期函数的使用较为频繁,需要重点掌
1.2,Vue的初始化流程
- beforeCreate阶段
- vue中data的数据和methods的方法还不能使用
- created阶段
- vue中data的数据和methods的方法已可以使用
- beforeMount阶段
- 页面可以展示内容,但是是未编译,最终都是不能操作的DOM结构,展示时间短
- mounted
- 页面显示编译后的DOM
- vue的初始化过程结束
- 此阶段可进行:定时器、网络请求、订阅消息、绑定事件等
1.3,Vue的更新流程
- beforeUpdate
- 数据是新的,页面还没有更新
- Updated
- 数据是新的,页面同步更新
1.4, Vue的销毁流程
- beforeDestroy
- 此阶段可关闭定时器和取消订阅
- 数据、方法可以访问但是不触发更新
- destroy
- 一切都结束了
1.5, 回顾生命周期
- 生命周期函数
- 创建前、创建后(beforeCreate、created)
- 挂载前、挂载后(beforeMount、mounted)
- 更新前、更新后(beforeUpdate、updated)
- 销毁前、销毁后(beforeDestroy、destroyed)
- 常用的生命周期函数
- mounted
- 开启定时器
- 发送ajax请求
- 订阅消息
- 绑定自定义事件
- beforeDestroy
- 清除定时器
- 取消订阅、事件监听
- 解绑自定义事件
- vue实例销毁
- vue开发者工具的数据为空
- 销毁后自定义事件失效
- 不要在beforeDestroy进行数据的操作,不会再走更新流程