您的位置:首页 > 娱乐 > 八卦 > 关于Vue2的生命周期会问到哪些面试题?

关于Vue2的生命周期会问到哪些面试题?

2024/10/6 8:36:07 来源:https://blog.csdn.net/m0_54007573/article/details/140000673  浏览:    关键词:关于Vue2的生命周期会问到哪些面试题?

在Vue2的面试中,关于生命周期的问题通常会涉及以下几个方面:

一、Vue2的生命周期概述

  1. Vue2的生命周期是什么?
    • Vue2的生命周期是指从Vue实例的创建、初始化数据、编译模板、挂载Dom、渲染、更新、卸载等一系列过程。

二、生命周期钩子函数

  1. 列出Vue2的主要生命周期钩子函数。
    • beforeCreate:实例创建前,此时data和methods中的数据未初始化,不能使用。
    • created:实例创建完成后,此时data和methods已经初始化完成,可以调用。
    • beforeMount:挂载前,此时内存中的模板已编译好,但还未挂载到html界面中。
    • mounted:挂载后,模板已经挂载到html界面,可以操作页面上的DOM节点。
    • beforeUpdate:数据更新前,页面未同步(此时页面显示的数据是旧的)。
    • updated:数据更新后,页面数据已更新。
    • beforeDestroy:销毁前,此时的实例还未被真正的销毁,Vue实例上的所有的data、methods、指令、过滤器、组件等都还处于可用状态。
    • destroyed:销毁后,此时的实例已经被销毁,Vue实例上的所有的data、methods、指令、过滤器等都不可用(DOM结构依然存在)。
    • activated(keep-alive专属):组件被激活时调用。
    • deactivated(keep-alive专属):组件被销毁时调用。
  2. 第一次页面加载后会触发哪几个钩子?
    • beforeCreatecreatedbeforeMountmounted

三、生命周期钩子函数的使用场景

  1. Vue获取数据(发送请求)在哪个周期函数?
    • 一般情况下,在createdbeforeMountmounted中均可,因为在这三个钩子函数中,data已经创建完成,可以将服务器端返回的数据进行赋值。但如果要操作DOM,需要在mounted时操作。
  2. 异步请求在created中的好处是什么?
    • 能更快地获取服务器端数据,减少页面loading时间;
    • SSR(服务器端渲染)不支持beforeMount/mounted钩子函数,所以放在created中有助于一致性。

四、父子组件生命周期执行顺序

  1. 父子组件生命周期的执行顺序是怎样的?
    • 组件渲染的顺序是先父后子,渲染完成的顺序是先子后父;
    • 组件更新的顺序是先父后子,更新完成的顺序是先子后父;
    • 组件销毁的顺序是先父后子,销毁完成的顺序是先子后父。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com