2023-01-05 对vue生命周期的理解,父组件和子组件生命周期钩子执行顺序,第一次页面加载会触发哪几个钩子,vue获取数据在一般在哪个周期函数

前端OnTheRun

已于 2025-04-03 17:31:09 修改

阅读量302

点赞数

分类专栏：面试知识点 vue 文章标签： vue.js javascript 生命周期 dom 钩子函数

于 2023-01-05 07:15:00 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/128554902

版权

本文探讨了Vue实例的生命周期，包括8个主要阶段，如beforeCreate、created、beforeMount、mounted等，并详细解释了各个阶段的特点和作用。特别强调了在created和mounted钩子中获取数据的时机。此外，还解析了父组件与子组件生命周期钩子的执行顺序，以及在实际应用中的考虑点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

0.什么是vue的生命周期?有什么作用?

每个vue实例在被创建时都要经过一系列的初始化过程,在此过程中会运行叫做生命周期钩子的函数,可以让用户在不同阶段添加自己的代码

1.对vue生命周期的理解?

vue的生命周期分为8个阶段:创建前后,挂载前后,更新前后,销毁前后

创建前后
beforeCreate阶段:vue实例的挂载元素$el和数据对象data都为undefined,还没有初始化
created阶段:vue实例对象data有了,$el还没有
总结:beforeCreate阶段中$el和data都是undefined,created阶段中data已经初始化完成但$el还没有
挂载前后
beforeMount阶段:vue实例的$el和data都初始化完成,但是还没有挂载为真实DOM(还是虚拟DOM节点),data message还没替换
mounted阶段:vue实例挂载为真实DOM,data message成功渲染
总结:beforeMount阶段data和$el初始化完毕但还没有挂载成真实DOM,mounted阶段vue实例挂载完成
更新前后
当data发生变化时,会触发beforeUpdate和updated方法
销毁前后
当执行destroy方法后,对data的改变不会再触发生命周期函数,说明此时vue实例已经解除了事件监听和对DOM的绑定(但DOM结构依然存在)

2.第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

3.vue获取数据在一般在哪个周期函数?

created,beforeMount,mounted

4.created和mounted的区别?

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

5.父组件和子组件生命周期钩子执行顺序是什么？(面试题)

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 
子 beforeCreate -> 子 created -> 子 beforeMount -> 
子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

6.示例

<!DOCTYPE html>
<html lang="en">
<head

最低0.47元/天解锁文章