目录
- 1.beforeCreate
- 2.created
- 3.beforeMount
- 4.mounted
- 5.beforeUpdate
- 6.updated
- 7.beforeUnmount(beforeDestroy)
- 8.unmounted(destroyed)
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
) - 使用场景
用于清理与其他实例的连接、解绑全部指令及监听事件