vue vue生命周期相关面试题
v u e 的 8 个 生 命 周 期 \color{yellowgreen}{vue的8个生命周期} vue的8个生命周期
beforeCreate(初始化界面前)
created(初始化界面后)
beforeMount(渲染dom前)
mounted(渲染dom后)
beforeUpdate(更新数据前)
updated(更新数据后)
beforeDestroy(卸载组件前)
destroyed(卸载组件后)
生 命 周 期 图 \color{yellowgreen}{生命周期图} 生命周期图
总 共 分 为 8 个 阶 段 : 创 建 前 / 创 建 后 , 载 入 前 / 后 , 更 新 前 / 后 , 销 毁 前 / 后 。 \color{yellowgreen}{总共分为8个阶段:创建前/创建后,载入前/后,更新前/后,销毁前/后。} 总共分为8个阶段:创建前/创建后,载入前/后,更新前/后,销毁前/后。
1)创建前(beforeCreate) 对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。
2)创建后(created)
<card :item="{ title: item.name,description: item.desc, poster: item.img }>
对应的钩子函数为created。在这个阶段vue实例已经创建,仍然不能获取DOM元素。
3,载入前(beforeMount) 对应的钩子函数是beforeMount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂 载的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行;beforeMount这个阶段是过渡性的,一般一个项目只能用到一两次。
4,载入后(mounted) 对应的钩子函数是mounted。mounted是平时我们使用最多的函数了,一般我们的异步请求都写
在这里。在这个阶段,数据和DOM都已被渲染出来。
5,更新前(beforeUpdate)
对应的钩子函数是beforeUpdate。在这一阶段,vue遵循数据驱动DOM的原则。beforeUpdate
函数在数据更新后虽然没立即更新数据,但是DOM中的数据会改变,这是Vue双向数据绑定的作 用。
6,更新后(updated) 对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
7,销毁前(beforeDestroy)
对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新,当我们不
再需要vue操纵DOM时,就要销毁Vue,也就是清除vue实例与DOM的关联,调用destroy方法可以销毁当前组件。在销毁前,会触发beforeDestroy钩子函数。
8,销毁后(destroyed)对应的钩子函数是destroyed。 在销毁后,会触发destroyed钩子函数。
vue的生命周期的思想贯穿在组件开发的始终,通过熟悉其生命周期调用不同的钩子函数,我们可
以准确的控制数据流和其对DOM的影响;vue生命周期的思想是Vnode和MVVM的生动体现和继 承。
( 1 ) 什 么 是 v u e 生 命 周 期 ? \color{yellowgreen}{(1)什么是vue生命周期?} (1)什么是vue生命周期?
Vue实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom–>渲染、更新–>渲染、卸载等一系列过程中,我们称这是vue 的生命周期。
( 2 ) v u e 生 命 周 期 的 作 用 是 什 么 ? \color{yellowgreen}{(2)vue生命周期的作用是什么?} (2)vue生命周期的作用是什么?
vue生命周期中有多个事件钩子,让我们在控制整个vue实例过程中更容易形成 好的逻辑。
( 3 ) v u e 生 命 周 期 总 共 有 几 个 阶 段 ? \color{yellowgreen}{(3)vue生命周期总共有几个阶段?} (3)vue生命周期总共有几个阶段?
可以总共分为8个阶段:创建前/后、载入前/后、更新前/后、销毁前/后。
( 4 ) 第 一 次 页 面 加 载 时 会 触 发 哪 几 个 钩 子 ? \color{yellowgreen}{(4)第一次页面加载时会触发哪几个钩子?} (4)第一次页面加载时会触发哪几个钩子?
第一次页面加载时会触发beforeCreate,created,beforeMount,mounted这几个钩子
( 5 ) D o m 渲 染 在 哪 个 周 期 就 已 经 完 成 ? \color{yellowgreen}{(5)Dom渲染在哪个周期就已经完成?} (5)Dom渲染在哪个周期就已经完成?
Dom渲染在mounted中就已经完成了。