Vue2生命周期的这些细节你都知道吗?

什么是 vue 生命周期?

Vue的生命周期是指Vue实例从创建到销毁的整个过程,这个过程可以分为四个阶段:创建(Creation)、挂载(Mounting)、更新(Updating)和销毁(Destruction)。每个阶段又包含了不同的生命周期钩子函数,通过这些钩子函数,我们可以在Vue实例的不同阶段添加自己的代码,实现特定的功能。

vue生命周期的各个阶段对应哪些钩子函数?

  1. 创建阶段(Creation Hooks)
  • beforeCreate:在实例初始化之后,数据观测(data observer)、事件(event)和watcher 设置之前被调用。
  • created:在实例创建完成 后被立即调用。在这一步,实例已完成数据观测、属性和方法的运算,watch和event 回调已设置,但是挂载阶段尚未开始,$el 属性目前不可见。
  1. 挂载阶段(Mounting Hooks)
  • beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
  • mounted:在 el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
  1. 更新阶段(Updating Hooks)
  • beforeUpdate:数据更新时调用,发生在虚拟DOM打补丁之前。适用于在现有DOM应用更改之前访问它。
  • updated:在由于数据变更导致的虚拟DOM重新渲染和打补丁之后调用。当这个钩子被调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。
  1. 销毁阶段(Destruction Hooks)
  • beforeDestroy:在实例销毁之前调用。实例仍然完全可用,这是你解绑订阅、监听器和取消Vue实例之间的事件通信的好时机。
  • destroyed:在实例销毁之后调用。调用此钩子时,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

这些生命周期钩子为在组件的不同阶段添加自己的代码提供了便利,例如在 created 钩子中进行数据请求,在 mounted 钩子中访问到DOM元素,在 beforeDestroy 钩子中进行清理操作等。理解和合理运用生命周期钩子是高效开发Vue应用的关键。

vue生命周期的各个阶段适合进行哪些操作?

  1. 创建阶段(Creation Hooks)
  • beforeCreate:可以用于加载一些不需要响应式处理的逻辑或数据。
  • created :可以访问this,进行数据初始化,比如从服务端获取数据。
  1. 挂载阶段(Mounting Hooks)
  • beforeMount:可以用于执行一些预操作,比如取消之前的请求或者清理状态。
  • mounted:通常用于发送请求获取数据、绑定非响应式的DOM事件监听器等。
  1. 更新阶段(Updating Hooks)
  • beforeUpdate:可以在这个钩子中访问现有的DOM,比如手动移除已添加的事件监听器。
  • updated:可以执行依赖于DOM更新的操作,比如手动强制更新子组件。
  1. 销毁阶段(Destruction Hooks)
  • beforeDestroy:可以用于清理定时器、取消未完成的请求等。
  • destroyed:可以执行一些最终的清理任务,确保没有残留的资源占用。

第一次页面加载会触发哪几个钩子?

会触发 beforeCreate, created, beforeMount, mounted 。

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

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

Vue的父组件和子组件生命周期钩子执行顺序是什么?

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:

  • 加载渲染过程:父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  • 子组件更新过程:父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  • 父组件更新过程:父 beforeUpdate -> 父 updated
  • 销毁过程:父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

本文由mdnice多平台发布

相关推荐
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆2 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang2 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf3 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir3 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
爱摄影的程序猿4 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
前端极客探险家5 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
随笔记6 小时前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack