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配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发