面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?

说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?

  • 一、说说vue2的生命周期函数
    • 1.1 vue生命周期分为四个阶段、8个钩子
      • 1.1.1 beforeCreate 和 created 初始化阶段
      • 1.1.2 beforeMount 和 mounted 挂载阶段
      • 1.1.3 beforeUpdate 和 updated 更新阶段
      • 1.1.4 beforeDestroy 和 destroyed 销毁阶段
    • 1.2 常用的生命周期钩子?(你用过哪些钩子?)
    • 1.3 请问vue在第一次加载的时候,会执行哪些钩子?
    • 1.4 父子组件生命周期钩子
  • 二、说说vue3的生命周期函数
  • 三、说说vue2和vue3的生命周期函数对比

一、说说vue2的生命周期函数

1.1 vue生命周期分为四个阶段、8个钩子

1.1.1 beforeCreate 和 created 初始化阶段

官网图示如下:
面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第1张图片
beforeCreate:创建了vue实例,但是还没有创建data。(不常用)
created:创建了data,但是还没有挂载点$el。最早可以操作data的钩子,一般用于发送ajax请求。(常用)

1.1.2 beforeMount 和 mounted 挂载阶段

面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第2张图片
beforeMount:创建了$ el,但是还没有完成挂载。
mounted:完成初始渲染。最早可以操作dom元素的钩子,一般用于dom操作。比如:如果我的页面有图表,echarts.init( dom元素 ),即,一进来想要渲染dom图表,最早只能在这个钩子里面做。(常用)

1.1.3 beforeUpdate 和 updated 更新阶段

面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第3张图片
beforeUpdate:当data数据发生变化的时候执行,但是数据变了,还没有更新视图。(因为vue更新是异步过程)(不常用)
updated:更新视图(将变化后的数据重新渲染)(不常用)
updated钩子不常用:因为这是data中任意数据变化都会走,如果data中有很多数据,则这个钩子就会非常频繁,会浪费内存,我们不需要侦听data中所有数据的变化。

1.1.4 beforeDestroy 和 destroyed 销毁阶段

面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第4张图片
beforeDestroy:销毁前执行(还没有销毁)
执行时机:(1)组件使用v-if切换为false (2)调用vm.$destroy
应用场景:清除定时器:setInterval

destroyed:vm完成销毁(解绑侦听器、子组件、methods事件)

1.2 常用的生命周期钩子?(你用过哪些钩子?)

created:一般用于发送ajax请求;
mounted:一般用于操作dom(渲染echarts)
beforeDestroy:一般用于清除定时器

1.3 请问vue在第一次加载的时候,会执行哪些钩子?

四个钩子:beforeCreate、created、beforeMount、mounted

1.4 父子组件生命周期钩子

记住口诀:父子子父!!!
加载渲染过程:图片如下
面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第5张图片
更新阶段:
面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第6张图片
销毁阶段:
面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第7张图片

二、说说vue3的生命周期函数

面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第8张图片

三、说说vue2和vue3的生命周期函数对比

面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?_第9张图片

你可能感兴趣的:(前端面试题,vue.js,前端,javascript)