vue的生命钩子函数有哪些?
时间: 2023-11-10 14:35:02 浏览: 36
Vue 的生命周期钩子函数可以分为 4 类:
1. 创建阶段
- beforeCreate:实例刚刚被创建,组件属性计算之前,如 data、methods 等都还未初始化。
- created:实例已经被创建,组件属性已经绑定,但真实的 DOM 还未生成,$el 属性还不存在。
2. 挂载阶段
- beforeMount:模板编译完成,但还未挂载到页面中。
- mounted:实例已经挂载到页面中,DOM 结构已经生成。此时可以访问到 $el 属性。
3. 更新阶段
- beforeUpdate:组件更新之前,可以在这里进行更改数据的操作。
- updated:组件更新完成,DOM 已经重新渲染。此时可以访问到更新后的 DOM。
4. 销毁阶段
- beforeDestroy:实例销毁之前,可以在这里进行一些清理工作。
- destroyed:实例已经被销毁,此时所有的事件监听和子实例都已经被销毁。
相关问题
Vue 的生命周期钩子函数有哪些?它们分别在什么时候执行?
ChatGPT: Vue 的生命周期钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。它们分别在组件实例创建前、实例创建后、挂载前、挂载后、更新前、更新后、销毁前和销毁后执行。
Vue 的父组件和子组件生命周期钩子函数执行顺序?
在 Vue 中,父组件和子组件都有自己的生命周期钩子函数,它们的执行顺序是有一定规律的。下面是父组件和子组件常用的生命周期钩子函数执行顺序:
1. beforeCreate:先父后子;
2. created:先父后子;
3. beforeMount:先父后子;
4. mounted:先子后父;
5. beforeUpdate:先子后父;
6. updated:先子后父;
7. beforeDestroy:先子后父;
8. destroyed:先子后父。
在执行过程中,父组件的生命周期钩子函数先于子组件执行,但在 mounted 阶段时,子组件的 mounted 钩子函数先于父组件执行。这是因为在父组件 mounted 钩子函数执行时,子组件的模板已经被渲染成真实的 DOM,此时子组件的 mounted 钩子函数才会执行。
需要注意的是,在父组件的 created 钩子函数中,子组件的实例并没有被创建,只有在父组件的 mounted 钩子函数中,子组件才会被实例化。因此,在父组件的 created 钩子函数中,是无法访问子组件的实例的。