【VUE面试题】生命周期钩子

957 阅读3分钟

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

一、什么是VUE的生命周期?

vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。

二、生命周期的作用是什么?

VUE的生命周期中有多个事件钩子,让我们在控制整个vue实例的过程时更容易形成好的逻辑。

三、DOM渲染在哪个周期中就已经完成?

DOM渲染在mounted中就已经完成了

四、Vue生命周期总共有几个阶段?

1. 创建

  • beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)

    使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用

  • created:实例已经创建,仍然不能获取DOM节点(有data,没有el)

    使用场景:模板渲染成html前调用,此时可以获取data和methods,可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里。

2. 载入

  • beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)

  • mounted:数据和DOM都已经被渲染出来了

    使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里

3. 更新

  • beforeUpdate:检测到数据更新时,但在DOM更新前执行
  • updated:更新结束后执行 使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick

4. 销毁

  • beforeDestroy:当要销毁vue实例时,在销毁前执行
  • destroyed:销毁vue实例时执行

五、第一次页面加载会触发那几个钩子?

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

六、Vue 的父组件和子组件生命周期钩子执行顺序?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子。

渲染过程:

父组件挂载完成一定是等子组件都挂载完成后,才算是父组件挂载完,所以父组件的mounted在子组件mouted之后

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

子组件更新过程:

影响到父组件:父beforeUpdate -> 子beforeUpdate->子updated -> 父updted

不影响父组件:子beforeUpdate -> 子updated

父组件更新过程:

影响到子组件:父beforeUpdate -> 子beforeUpdate->子updated -> 父updted

不影响子组件:父beforeUpdate -> 父updated

销毁过程:

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

重要:父组件等待子组件完成后,才会执行自己对应完成的钩子。