生命周期
当前组件在创建到销毁经历的一系列过程,称之为生命周期
初始化阶段
钩子函数 | 描述 | 数据 | 真实DOM | 项目中使用 |
---|---|---|---|---|
beforeCreate | 表示组件创建前的准备工作, 为事件的发布订阅 和 生命周期的开始做初始化 | 无 | 无 | 项目中一般不使用 |
created | 表示组件创建结束 | 有 | 无 | 异步数据请求, 然后可以进行一次默认数据的修改 |
beforeMount | 表示组件装载前的准备工作(VDOM) | 有 | 无 | 数据请求, 它也可以进行一次数据修改 |
mounted | 组件挂载结束,真实DOM渲染完成 | 有 | 有 | DOM操作, 第三方库的实例化 |
初始化总结
数据请求:created
DOM操作: mounted
数据修改: beforeMount created mounted
运行中阶段
触发条件:当data选项中的数据发生改变时触发
钩子函数 | 描述 | 数据 | 真实DOM | 项目中使用 |
---|---|---|---|---|
beforeUpdate | 数据更新前的准备工作,数据修改才会执行 | 有(修改后的数据) | 有 | 生成新的 VDOM , 然后通过diff算法进行两次VDOM 对比,没有太多的操作意义 |
updated | 数据更新结束, 通过render函数渲染真实DOM | 有 | 有(重新渲染后的真实DOM) | 可以进行异步数据请求得到的dom渲染的第三方库实例化 |
销毁阶段
手动销毁
- 开关销毁(v-if手动销毁),这个组件的真实DOM也会被删除掉
- 调用vm.$destroy()销毁,这个组件被删除了,但是它的真实DOM的html结构还在
销毁的钩子函数
钩子函数 | 描述 |
---|---|
beforeDestroy | 组件即将销毁,准备调用 $destroy() 方法 |
destroyed | 组件销毁结束 |
项目中:
做善后工作 , 手动清除一些计时器, 和一些方法, 还有第三方实例化出来的对象
建议使用开关的形式来操作组件的销毁和创建
钩子函数
- 钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发