Vue生命周期与钩子函数(后附经典面试题)

本文详细介绍了Vue组件的生命周期,包括初始化阶段、挂载阶段、更新阶段和销毁阶段的各个钩子函数,如beforeCreate、created、beforeMount、mounted等。此外,还涉及了数据改变时的beforeUpdate和updated钩子,以及组件销毁时的beforeDestroy和destroyed钩子。在文章末尾,给出了关于Vue生命周期的经典面试题。
摘要由CSDN通过智能技术生成

1. vue生命周期

一组件从 创建 到 销毁 的整个过程就是生命周期

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

2.钩子函数

Vue 框架内置函数,随着组件的生命周期阶段,自动执行,特定的时间点,执行特定的操作

2.1 分为4大阶段8个方法:

阶段 方法名 方法名
初始化 beforeCreate created
挂载 beforeMount Mounted
更新 beforeUpdate updated
销毁 beforeDestroy destroyed

 下图展示了实例的生命周期:

2.2 初始化阶段

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

没有. 调用$mount()方法

有, 继续检查template选项

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值