生命周期

img点击并拖拽以移动

生命周期有8个函数(钩子):

1. beforeCreate 创建前

在实例初始化之后,数据观测(data observer)和 event/watch事件配置之前被调用

一般这个时候,对象还没有创建,组件还没有挂载,data等还没有初始化,一般用来在组件挂载前渲染一些东西

2. Created 创建完成

在实例创建完成后立即被调用,在这一步实例已经完成了:数据观测、属性和方法的运算和 event/watch事件的回调,但是$el属性目前不可见。

这时候上面的data、methods、computed都已经创建完成了,可以调用methods中的方法,改变data中的数据

3. beforeMount 挂载前

在挂载开始之前被调用

挂载之前被调用,render(渲染)函数首次被调用,但还没有渲染到页面上

4. mounted 挂载完成

在挂载成功后被调用,el被新创建的vm.$el替换

挂载完成了,这时候HTML模板会被渲染到HTML中。但mounted只能执行一次。

5. beforeUpdate 更新前

数据更新之前调用

更新指数据更新,发生在虚拟DOM重新渲染之前,在这个钩子中可以更改状态而不发生重绘。

6. updated 更新完成

数据更新完成时调用,组件dom已经更新

调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用

7. beforeDestroy 销毁前

组件销毁前调用

在实例销毁前调用,一般用来做重置操作,比如清除定时器和DOM监听事件。

8. destroyed 销毁完成

组件销毁后调用

在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用

相关面试题

1. 什么是vue生命周期?

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

2. vue生命周期的作用是什么

Vue 所有的功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 生命周期中有多个事件钩子,在控制整个vue实例的过程时更容易形成好的逻辑。

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

beforeCreate , created , beforeMount ,mounted 这几个钩子

4. 父子组件的生命周期
  • 执行顺序:
    • 父组件开始执行到beforeMount 然后开始子组件执行,最后是父组件mounted。
    • 如果有兄弟组件,父组件开始执行到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted。
  • 当子组件挂载完成后,父组件才会挂载。
  • 当子组件完成挂在后,父组件会主动执行一次beforeUpdated/updated钩子函数(仅首次)
  • 父子组件在data变化中是分别监控的,但是更新props中的数据是关联的。
  • 销毁父组件时,先将子组件销毁后才会销毁父组件。
  • 兄弟组件的初始化(mounted之前)是分开进行,挂载是从上到下依次进行
  • 当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的