vuejs生命周期概述以及使用

生命周期

当前组件在创建到销毁经历的一系列过程,称之为生命周期

初始化阶段

钩子函数 描述 数据 真实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配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发

你可能感兴趣的:(vuejs生命周期概述以及使用)