Vue生命周期详解
目录
1.beforeCreate
- 分析
beforeCreate执行时Vue实例还没有被创建 ，data和methods也没有初始化，还没进行数据观测，所以此时不能访问data和methods。
- 使用场景
通常用于插件开发中执行初始化任务。
2.created
- 分析
Created执行时Vue实例已经被创建，数据观测完成，此时可以调用methods中的函数，也可以访问和修改data中的数据。
- 使用场景
各种数据可以使用，常用于异步数据的获取。
3.beforeMount
- 分析
beforeMount执行时，虚拟DOM已经生成，模板也已经渲染完成，但还没有挂载到页面上，此时的页面还是旧的页面。
- 使用场景
此时可以做一些模板相关的操作或者数据预处理相关的操作。
4.mounted
- 分析
mounted执行时已完成DOM的渲染和挂载，页面已经更新
- 使用场景
可以访问数据并操作DOM元素
5.beforeUpdate
- 分析
beforeUpdate执行时更新的虚拟DOM已经生成，更新的数据已经渲染到了模板中，但还没有挂载到页面上，此时的页面还是旧的页面。
- 使用场景
可以获取更新前的各种状态
6.updated
- 分析
updated执行时更新的DOM已经渲染并挂载完成，页面已经更新
- 使用场景
所有状态都是最新的，可以执行操作，触发组件动画等操作
7.beforeUnmount（beforeDestroy）
- 分析
beforeUnmount钩子函数执行时，vue实例已经从运行阶段进入了销毁阶段，此时所有的data、methods、过滤器以及指令等都还可以使用
- 使用场景
可用于一些定时器或订阅消息的取消
8.unmounted（destroyed）
- 分析
实例完成销毁（只是销毁实例，并不能清除DOM）
- 使用场景
用于清理与其他实例的连接、解绑全部指令及监听事件