zxdfe / FE-Interview

Every step counts
34 stars 1 forks source link

第34题:说一说Vue的生命周期? #35

Open zxdfe opened 2 years ago

hezi98 commented 2 years ago

1.vue有一般情况下有初始化、挂载、更新和销毁四个生命周期,以及四个生命周期对应的八个钩子函数; 2. 在初始化周期的钩子函数包括beforeCreate()和created(),created()在vue中data、methods等里面的数据生成后触发,实际开发中一般会在created()中进行进行获取页面初始数据以及一些静态数据的操作; 挂载周期包括deforeMount()和mounted()两个钩子函数,分别表示真实DOM结构挂载之前和挂载触发,实际开发中如果需要在DOM加载之后第一时间对DOM进行操作,一般会在mounted()钩子函数中进行; 更新周期包括beforeUpdata()和updated()两个钩子函数,分别表示数据更新之前和数据更新之后触发,但实际开发中一般不会使用这两个函数,因为当数据频繁更新时,每一次数据更新就会触发一次对应的函数,会造成循环,如果需要对数据更新进行监视触发一定的逻辑,可以通过监听器watch来实现; 销毁阶段包括beforeDestroy()和destroyed()两个钩子函数,表示vue实例销毁前和销毁后触发的函数,实际开发中一般会在beforeDestroyed()中对定时器、计时器等进行关闭,如果不关闭,当组件销毁后定时器也会继续执行; 3.除了以上八个钩子函数外,当组件中使用keep-alive缓存组件时,vue会触发两个全新的钩子函数,分别是激活时触发的activated()和失活时触发的deactivated(),此时上面的八个钩子函数会失效;

DengZhaoQuan commented 1 year ago

vue生命周期和钩子函数

  1. vue生命周期是指 vue实例/组件 从创建到销毁的过程。

  2. Vue生命周期一般有4个阶段(初始化,挂载,更新,销毁),每个阶段的前后都有一个钩子函数。

beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed

阶段 | 方法名 | 方法名 -- | -- | -- 初始化 | beforeCreate | created 挂载 | beforeMount | mounted 更新 | beforeUpdate | updated 销毁 | beforeDestroy | destroyed
  1. created : 当数据与方法初始化完成后执行的函数,此时可以在当前函数中使用方法与数据 - 常用来在这个阶段获取后端数据。

  1. mounted :当真实dom挂载到页面上之后执行的函数,此时可以在函数中操作dom,并且可以执行所有在created中执行的逻辑。

=> 如果一个方法很难判断在created或者是mounted中执行时,直接放到mounted中即可
  1. 更新阶段的2个函数beforeUpdate、updated 存在 死循环数据更新 的问题,所以如果需要监听某个数据发生的变化时,用watch监听器来代替更新阶段的钩子函数。

  1. beforeDestroy:如果当前组件中定义了全局的异步操作(主要是定时器),那么在销毁前 (beforeDestroy )时需要主动关闭这些异步操作。

  2. 其他的三个钩子函数

  • errorCaptured: 当捕获一个来自子孙组件的错误时被调用。

  • activated: 被 keep-alive 缓存的组件激活时调用。

  • deactivated: 被 keep-alive 缓存的组件停用时调用。