便宜VPS主机精选
提供服务器主机评测信息

vue生命周期11个钩子函数简介

Vue生命周期中包含以下11个钩子函数:

  1. beforeCreate(创建前):在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  2. created(创建后):在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。但是,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount(装载前):在挂载开始之前被调用:相关的 render 函数首次被调用。
  4. mounted(装载后):el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数。此时模板渲染成最终的 HTML 并插入页面中。
  5. beforeUpdate(更新前):数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数中进一步地更改状态,不会触发附加的重渲染过程。
  6. updated(更新后):由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子函数。当这个钩子函数被调用时,组件 DOM 已经更新,如果有需要执行依赖于DOM的操作可以放在这里。
  7. activated(激活):keep-alive 组件激活时调用,这个钩子函数只有在 keep-alive 组件里使用时才会被调用。
  8. deactivated(停用):keep-alive 组件停用时调用,这个钩子函数只有在 keep-alive 组件里使用时才会被调用。
  9. beforeUnmount(卸载前):实例销毁之前调用。在这一步,实例仍然完全可用。
  10. unmounted(卸载后):实例销毁后调用。此时,所有的指令已经解绑,所有的事件监听器已经移除,所有子实例也已经被销毁。
  11. errorCaptured(错误捕获):当捕获一个来自子孙组件的错误时被调用。

这些钩子函数可以帮助我们在组件生命周期的不同阶段执行代码和操作。

未经允许不得转载:便宜VPS测评 » vue生命周期11个钩子函数简介