一文教你搞懂Vue生命周期

Vue生命周期

生命周期示意图

img

Vue 实例生命周期

Vue3

组件生命周期图示

组件创建阶段

  • new vue

    new一个vue的实例对象;此时会进入组件的创建过程(该组件在代码中被注册并使用时,就代表着其被new了一个新的实例对象)。

  • Init Events & Lifecycle

    初始化组件的事件和生命周期函数;当执行完这一步之后,组件的生命周期函数就已经全部初始化好了,等待着依次去调用。

  • beforeCreate (服务端渲染可用

    (初始化一个空的 Vue 实例),组件的props,data和methods以及页面DOM结构,都还没有初始化

    在实例初始化之后,进行数据侦听事件/侦听器的配置之前同步调用

  • Init injections & reactivity

    这个阶段中,正在初始化props,computed, data和methods中的数据以及方法。

    在creted之前就会行初始化 computed 和 watch

  • created(服务端渲染可用

    Vue 实例初始化完成,props data methods 都已初始化完成,可调用。但尚未开始渲染模板。

    在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听计算属性方法事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用。

  • 判断是否有el,template,然后进行编译

    正在解析模板结构,把data上的数据拿到,并且解析执行模板结构汇总的指令;当所有指令被解析完毕,那么模板页面就被渲染到内存中了;当模板编译完成,我们的模板页面,还没有挂载到页面上,只是存在于内存中,用户看不到页面;

image-20240308101931045

优先级顺序:el < template < render

el对应的HTML元素是写在网页上的。

//1、el,template,render(渲染函数)都是vue对象对应的HTML元素(DOM对象)
//2、优先级顺序:el < template < render
//3、el对应的HTML元素是写在网页上的。HTML代码:<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><span>我今年{{age}}岁了</span></div></body>
</html>
<script type="text/javascript" src="js/vue.min.js" ></script>
//1、只有el
let vm = new Vue({el:"#app",data:{age:12}
});
2、只有template,是不行的,因为,vue对象不知道把template放在何处;
3、只有render(渲染)函数,也是不行的,因为,vue对象不知道把render后的结果放在何处;
4、既有el又有template,就会用template里的内容替换el的outHTML。let vm = new Vue({el:"#app",template:"<div><p>我template出来的,年龄{{age}}</p></div>",data:{age:12}
});
查看elements:发现 id为app的div没有了5、既有el又有template,又有render函数。就会使用render函数的内容,因为它的优先级高。
//   但是此时,“Mustache”语法 (双大括号)没法使用,
//   因为,vue只是把render函数的返回值放在HTML里,而不进行再次的绑定
//   render函数就是让你发挥 JavaScript 最大的编程能力。let vm = new Vue({el:"#app",template:"<div><p>我template出来的,年龄{{age}}</p></div>",data:{age:12},render:function(createElement){// return createElement('h1', '我是render出来的HTML,年龄{{age}}');//不能使用“Mustache”语法 (双大括号)return createElement('h1', '我是render出来的HTML,年龄'+this.age);}
});
查看elements:发现 id为app的div没有了,template属性的值也没有起作用,只显示了render函数的返回值。
  • beforeMount

    编译模板,调用 render 函数生成 vdom ,但还没有开始渲染 DOM

  • 创建并替换

    这一步把正在内存中渲染好的模板结构替换掉el属性指定的DOM元素

  • mounted

    渲染 DOM 完成,页面更新。组件创建完成,开始进入运行阶段。

    注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick:

组件运行阶段

  • beforeUpdate

    data中的数据,已经是最新的数据了。但是,页面上渲染的数据,还是之前的旧数据

    在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。

  • virtual DOM re-render and patch

    正在根据最新的data数据,重新渲染内存中的的DOM结构;并把渲染好的模板结构替换到页面上

  • updated

    在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

    注意,尽量不要在 updated 中继续修改数据,否则可能会触发死循环。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

    注意,updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick:

  • activated/onActivated

    keep-alive 缓存的组件激活时调用。

  • deactived/onDeactivated

    keep-alive 缓存的组件停用时调用。

组件销毁阶段

  • beforeDestory/beforeUnmount

    组件进入销毁阶段。组件即将被销毁,但是还没有真正开始销毁,此时组件还是正常可用的;data、methods等数据或方法,依旧可以被正常访问。

    卸载组件实例后调用,在这个阶段,实例仍然是完全正常的。

    移除、解绑一些全局事件、自定义事件,可以在此时操作。

  • 销毁过程

    销毁组件的数据侦听器,子组件,事件监听

  • destoryed/unmounted

    卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

2.5.0+新增errorCaptured

  • 类型(err: Error, vm: Component, info: string) => ?boolean

  • 详细

    在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

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

如何正确的操作 DOM

mountedupdated 都不会保证所有子组件都挂载完成,如果想等待所有视图都渲染完成,需要使用 $nextTick

mounted() {this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码})
}

ajax 放在哪个生命周期合适?

一般有两个选择:createdmounted ,建议选择后者 mounted

执行速度

  • 从理论上来说,放在 created 确实会快一些
  • 但 ajax 是网络请求,其时间是主要的影响因素。从 createdmounted 是 JS 执行,速度非常快。
  • 所以,两者在执行速度上不会有肉眼可见的差距

代码的阅读和理解

  • 放在 created 却会带来一些沟通和理解成本,从代码的执行上来看,它会一边执行组件渲染,一边触发网络请求,并行
  • 放在 mounted 就是等待 DOM 渲染完成再执行网络请求,串行,好理解

所以,综合来看,更建议选择 mounted

Composition API 生命周期有何不同

  • setup 代替了 beforeCreatecreated
  • 生命周期换成了函数的形式,如 mounted -> onMounted 参考 https://v3.cn.vuejs.org/api/composition-api.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
import { onUpdated, onMounted } from 'vue'export default {setup() {onMounted(() => {console.log('mounted')})onUpdated(() => {console.log('updated')})} 
}

computed 初始化在什么时候?

props,methods,data和computed,watch的初始化都是在beforeCreated和created之间完成的

watch,immediate为true触发时机

immediate如果为true, 也是发生在beforeCreate 之后,created之前

父子组件的生命周期顺序

加载渲染过程 :

  • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程:

  • 父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程:

  • 父beforeUpdate->父updated

销毁过程:

  • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

父子组件及mixin的生命周期执行顺序:

  • mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted

image-20240308113947100

image-20240308113717011

<template><div><div ref="div">父组件</div><input type="text" v-model="msg"><div>{{newMsg}}</div><hr><child :msg="msg"></child></div>
</template><script>
import Child from './Child.vue'
export default {name: 'ParentDemo',components: {Child},data() {return {msg: '父组件的数据'}},beforeCreate() {console.log('父beforeCreate', this.msg)},created() {console.log('父created', this.msg)},beforeMount() {console.log('父beforeMount', this.$refs.div)},mounted() {console.log('父mounted', this.$refs.div)},beforeUpdate() {console.log('父beforeUpdate', this.$refs.div.innerHTML)},updated() {console.log('父updated', this.$refs.div.innerHTML)},activated() {console.log('父activated')},deactivated() {console.log('父deactivated')},beforeDestroy() {console.log('父beforeDestroy')},destroyed() {console.log('父destroyed')},errorCaptured() {console.log('父errorCaptured')},computed: {newMsg() {return this.msg + 'computed'}},watch: {msg: {handler(newVal, oldVal) {console.log('父watch', newVal, oldVal)},immediate: true}}
}
</script>

Child.vue

<template><div><div>子组件</div><p>父组件传递过来的数据:{{msg}}</p></div>
</template><script>
export default {name: 'ChildDemo',props: ['msg'],beforeCreate() {// 这里获取不到this.msg,获取会报错console.log('子beforeCreate')},created() {console.log('子created', this.msg)},beforeMount() {console.log('子beforeMount')},mounted() {console.log('子mounted')},beforeUpdate() {console.log('子beforeUpdate')},updated() {console.log('子updated')},activated() {console.log('子activated')},deactivated() {console.log('子deactivated')},beforeDestroy() {console.log('子beforeDestroy')},destroyed() {console.log('子destroyed')},errorCaptured() {console.log('子errorCaptured')}
}
</script>

上源码

beforeCreate->created之间做的事

  • inject
  • state (props,methods,computed,watched)
  • provide

vue/src/core/instance

image-20240308123420608

init.ts

image-20240308124238408

inject.ts

image-20240308124448616

state.ts

image-20240308124605288

inject.ts

image-20240308124708944

参考文章

  • vue 自省知识点——生命周期

  • Vue中的computed是在生命周期的哪个阶段执行的?

  • Vue组件的生命周期

  • vue中el属性…

  • vue2,最重要的还是官网啊啊啊

  • vue3官网相关解释

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729649.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp封装文字提示气泡框toolTip组件

uniapp封装文字提示气泡框toolTip组件 文字提示气泡框&#xff1a;toolTip 因为uniapp 中小程序中没有window对象&#xff0c;需手动调用 关闭 第一种办法关闭&#xff1a;this.$refs.tooltip.close() 第二种办法关闭&#xff1a;visible.sync false 移动端没有现成的toolTip组…

【2024.03.05】定时执行专家 V7.1 发布 - TimingExecutor V7.1 Release

目录 ▉ 软件介绍 ▉ 新版本 V7.1 下载地址 ▉ V7.1 新功能 ▼2024-03-03 V7.1 - 更新日志 ▉ V7.0 新UI设计 ▉ 软件介绍 《定时执行专家》是一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件。软件具有 25 种【任务类型】、12 种【触发器】触发方式&#x…

Linux运维工程师不可或缺的10款工具

运维工程师在日常工作中频繁运用的10款工具&#xff0c;并细致阐述每款工具的功能、适用场景以及其卓越之处。 1. Shell脚本&#xff1a; 功能&#xff1a;主要用于自动化任务和批处理作业。 适用场景&#xff1a;频繁用于文件处理、系统管理、简单的网络管理等操作。 优势&…

unicloud 获取集合collection并请求云数据库

unicloud 获取集合collection并请求数据库 在unicloud 云数据库概念及创建一个云数据库表并添加记录(数据)这一篇文章中,我介绍了unicloud数据库以及如何新建表数据 如果没看过的话可以去看看,然后在看这篇文章,因为这篇文章讲解的是如何获取云数据库的数据集合,要想获取,你得…

后量子时代,未来密码该何去何从?

古有飞鸽&#xff0c;现有网络&#xff0c;在知识经济为基础的信息化社会中&#xff0c;保障网络信息安全无疑成为成为国与国之间无形的较量。小到个人通讯&#xff0c;大到机要信息传输&#xff0c;信息安全对于国家安全和经济活动正常运转至关重要。密码学作为保障网络与信息…

java017 - Java接口

1、接口概述 2、接口特点 代码&#xff1a; jumpping接口&#xff1a; 猫类&#xff1a; 测试类&#xff1a; 3、接口成员特点 代码&#xff1a; 实现 4、类和接口直接的关系 5、抽象类和接口的区别 不合理&#xff1a;不是所有门都具备报警功能&#xff0c;继承和实现都要写…

react native封装ScrollView,实现(滑到底部)和(滑到顶部+手指继续向下滑)时拉取新数据

里面的tw是在react native中使用tailwind的第三方库 只求读者把样式看个大概&#xff0c;主要还是功能的实现 ScrollView的官方文档如下 https://reactnative.cn/docs/scrollview import tw from twrnc import { View, Text, ScrollView, RefreshControl } from react-native …

双体系Java学习之算术运算符,赋值运算符,关系运算符

// 二元运算符//CtrlD : 复制当前行到下一行int a 10;int b 20;int c 25;int d 25;System.out.println(ab);System.out.println(a-b);System.out.println(a*b);System.out.println(a/(double)b);赋值运算符 关系运算符 package operator;public class Demo03 {public stati…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础组件:AlphabetIndexer)

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 AlphabetIndexer(value: {arrayValue: Array<string>, s…

面试管:来,小卡拉米,来个最基本的,说一下Set和Map的理解

听到这个题之后的内心独白&#xff1a; 卧槽&#xff0c;我都是背的高达上&#xff0c;为啥来个基本的&#xff0c;没准备呀&#xff0c;这让我怎么吹牛逼&#xff0c;我特码的面的可是高级呀&#xff0c;不应该问我&#xff1a;项目调优、首屏优化、打包优化等问题吗&#xff…

【教程】 iOS构建版本无效问题解决方案

引言 在进行iOS应用上架时&#xff0c;有时会遇到构建版本无效的问题&#xff0c;即通过XCode上传成功后&#xff0c;但在App Store Connect的TestFlight中无法显示构建版本&#xff0c;或者显示一会儿后就消失了。本文将介绍可能的原因分析&#xff0c;并提供解决问题的方法。…

webpack基础配置及使用

webpack是什么 是一个现代 JavaScript 应用程序的静态模块打包器。当webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图 &#xff0c;其中包含应用程序需要的每个模块&#xff0c;然后将所有这些模块打包成一个或多个 bundle 。主要有 五个核心概念&#xff1a…

电源技术中的TPHR8504PL,LQ(M1W 40V高速同步N沟道150A 功率MOSFET用于高效DC-DC转换器

TPHR8504PL,LQ&#xff08;M1W是一种MOSFET&#xff08;金属氧化物半导体场效应晶体管&#xff09;&#xff0c;它是40 Volt N-沟道MOSFET&#xff0c;由N型沟道和P型衬底构成&#xff0c;而P-沟道MOSFET则由P型沟道和N型衬底构成。 TPHR8504PL,LQ&#xff08;M1W N-沟道MOSFE…

2024 ssh连接linux ,包括连接被拒的解决方案

这里以windows系统 连接 linux&#xff08;centOS&#xff09;为例&#xff1a; 一、如果windows 连接时出现&#xff1a; Permission denied, please try again. 连接被拒绝&#xff0c;做出以下修改&#xff1a; 打开linux - Terminal 输入&#xff1a;cat /etc/ssh/sshd_c…

【算法 高级数据结构】树状数组:一种高效的数据结构(一)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;算法题、 基础算法~赶紧来学算法吧 &#x1f4a1;往期推荐&#xff1a; 【算法基础 & 数学】快速幂求逆元&#xff08;逆元、扩展欧几里得定理、小费马定理&#x…

Python与FPGA——图像锐化

文章目录 前言一、图像锐化二、Python robert锐化三、Python sobel锐化四、Python laplacian锐化五、FPGA sobel锐化总结 前言 在增强图像之前一般会先对图像进行平滑处理以减少或消除噪声&#xff0c;图像的能量主要集中在低频部分&#xff0c;而噪声和图像边缘信息的能量主要…

品牌要把控质量也要管控价格

在品牌发展的道路上&#xff0c;产品质量的把控非常重要&#xff0c;关系到品牌的竞争力&#xff0c;但品牌要长期发展&#xff0c;产品要获得市场足够份额&#xff0c;还需要有稳定的价格体系做支撑&#xff0c;这个价格不是仅凭品牌单方面的定价而定&#xff0c;而是整个渠道…

Oracle定时任务和存储过程

--1.声明定时任务 DECLAREjob NUMBER; BIGIN dbms_job.sumit(job, --任务ID,系统定义的test_prcedure(19)&#xff0c;--调用存储过程&#xff1f;to_date(20240305 02:00&#xff0c;yyyymmdd hh24:mi) --任务开始时间sysdate1/(24*60) --任务执行周期 [每分钟执行…

商业前端TS开发自动化工具

本期作者 一、背景 商业侧的业务比较复杂&#xff0c;B端项目中含有大量常量类的类型判断&#xff0c;且因历史原因&#xff0c;很多常量值前端无法直接知其含义&#xff0c;这既不利于新人的上手&#xff0c;也不利于项目的维护。 在开发协作上&#xff0c;前后端的API沟通&a…

什么是工业边缘网关?工业边缘网关有什么作用?

在数字化和智能化的浪潮下&#xff0c;工业领域正迎来前所未有的变革。其中&#xff0c;工业边缘网关作为这场变革中的重要角色&#xff0c;正逐渐受到人们的关注。那么&#xff0c;什么是工业边缘网关&#xff1f;它如何在工业数字化中发挥作用&#xff1f;今天&#xff0c;就…