当前位置: 首页 > article >正文

vue 生命周期

什么是生命周期,有什么作用

定义:vue 实例从创建到销毁的过程,在某个特定的位置会触发一个回调函数
作用:供开发者在生命周期的特定阶段执行相关的操作

生命周期分别有几个阶段

有四个阶段,每个阶段有两个钩子,一个前一个后
创建阶段:
beforeCreate :new Vue( ) 之后执行,但所以数据都还无法访问
created: 能拿到实例数据,这里更改数据不会触发更新,可使用this.$nextTick来执行要访问DOM的操作

挂载阶段:
beforeMount :template模版导入生成虚拟DOM,更改数据不会出发更新
mounted : 真实DOM挂载完毕,可以用 $refs访问到真实DOM

更新阶段:
beforeUpdate :响应式数据发生更新,虚拟 DOM 生成,在这个阶段修改数据不会重新渲染
updated :真实DOM完成更新,这里修改数据可能会导致无限循环更新。

销毁阶段:
beforeDestroy :销毁之前,所以实例数据DOM都可以访问,做组件销毁前的收尾工作,如注销事件绑定,清除定时器,销毁大数据
destroyed:组件被销毁,DOM被移除

使用keepAlive缓存组件,组件切换会触发actived / deactived两个钩子:
actived: 相当于创建和挂载阶段
deactived: 相当于销毁阶段

生命周期执行顺序

  1. 第一次加载会执行 beforeCreate,created,beforeMount,mounted

  2. 父子组件第一次渲染执行顺序(子的渲染夹在父的beforeMountmounted之间):
    beforeCreate->父created->父beforeMount-> 子组件加载四个阶段 ->父mounted

  3. 更新子组件的数据:子beforeUpdate->子updated

  4. 更新在父组件的数据(也在子组件渲染):
    beforeUpdate-子beforeUpdate->子updated-父updated

  5. 销毁过程:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed


http://www.kler.cn/news/155036.html

相关文章:

  • 461. 汉明距离
  • TCP三次握手与四次挥手
  • 爬虫-xpath篇
  • 计算机组成学习-计算机系统概述总结
  • DOM 事件的注册和移除
  • 深度学习好文记录,反复学习
  • Ext4文件系统解析(三)
  • redis性能测试
  • 计算机网络:应用层(上篇)
  • 【广州华锐视点】广东3D展厅开发服务找广州华锐视点,打造未来展览新体验!
  • Java笔记
  • C#编程题分享(5)
  • 自定义类型:结构体(自引用、内存对齐、位段(位域))
  • 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(2)后端跨域、登录模块、springboot分层架构、IDEA修改快捷键、vue代码风格
  • Python 简介和用途
  • springcloud==ribbon
  • C/C++ 谓词 lambda表达式
  • 自定义Vue的DockPanel-Layout
  • 深度学习记录--logistic回归损失函数向量化实现
  • LLM;超越记忆《第 2 部分 》
  • Echarts地图registerMap使用的GeoJson数据获取
  • Spring boot命令执行 (CVE-2022-22947)漏洞复现和相关利用工具
  • 高斯日记(cpp+java)
  • 线程安全的问题以及解决方案
  • 【重点】【双指针】15. 三数之和
  • Vue diff 算法探秘:如何实现快速渲染
  • Gson的用法详解
  • 中兴小鲜50 ZTE 畅行50 刷机救砖演示机7543n root 虎贲 展锐 T760 解锁BL
  • 人工智能 - 人脸识别:发展历史、技术全解与实战
  • 开源免费跨平台数据同步工具-Syncthing