vue的生命周期执行顺序争取的是,Vue生命周期的四个阶段
这篇文章主要介绍了vue2与vue3中生命周期执行顺序的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue2与vue3中生命周期执行顺序区别生命周期比较简单例子说明三种情况下的生命周期执行顺序1、单页面下生命周期顺序2、父子、兄弟组件的生命周期顺序3、不同页面跳转时各页面生命周期的执行顺序
vue2与vue3中生命周期执行顺序区别
生命周期比较
vue2中执行顺序创建前=已创建=装载前=已装载=更新前=已更新=销毁前=已销毁vue 3中执行顺序setup=onBeforeMount=on已安装=onBeforeUpdate=on已更新=onBeforeUnmount=on未安装对应关系
vue2-vue3
创建前-安装程序已创建-setupbeforeMount-onbeforemoundated-onbeforeupdate-onbeforeupdated before destroy-onbeforeumountdestroy-on已卸载其中vue3中的设置相当于vue2中创建前与创造但是的执行在创建前与创造之前，所以设置无法使用数据和方法中的数据和方法，即无法操作这个，设置中的这等于未定义，又因为设置中创建的变量与方法最后都要通过返回返回出去，所以设置中的程序只能是同步的，而不能是异步，除非返回后面只接受一个异步对象，对象返回设置内定义的变量与方法，然后父组件使用焦虑标签包裹异步组件；
vue3中如果要使用vue2的销毁前与破坏需要把名称分别改为卸载前，已卸载
如果vue3中同时使用了vue2的写法，vue3的写法会优先执行；
简单例子说明
父组件App.vue
模板
h1App父级组件/h1
button @click=childShow=！儿童秀切换儿童子组件的显示/按钮
人力资源/
child v-if=childShow /
/模板
脚本语言
从“vue”导入{ defineComponent，reactive，ref }。
//引入子组件
从导入子级.组件/子组件。vue ；
导出默认定义组件({
名称："应用程序",
组件：{
孩子，
},
setup() {
const child show=ref(true)；
返回{
儿童秀，
};
},
});
/脚本
风格
* {
边距：0;
填充：0;
}
/风格
子组件儿童。某视频剪辑软件
模板
h2child子级组件/h2
h3{{ name }}/h3
button @click=updateName 更新名称/按钮
/模板
脚本语言
导入{
定义一个组件，
在出发前，
在安装时，
onBeforeUpdate，
未更新，
onBeforeUnmount，
未安装时，
裁判，
}来自vue ；
导出默认定义组件({
姓名：孩子，
//vue2中的生命周期钩子
创建之前(){
console.log(vue2中的生命周期创建之前);
},
已创建(){
console.log(vue2中的生命周期已创建);
},
beforeMount() {
console.log(vue2中的生命周期挂载前’)；
},
已安装(){
console.log(vue2中的生命周期已安装);
},
更新之前(){
console.log(vue2中的生命周期更新前);
},
已更新(){
console.log(vue2中的生命周期已更新);
},
//vue2中的销毁前与破坏已经改名无法使用
卸载之前(){
console.log(vue2中的生命周期销毁前(卸载前))；
},
卸载(){
console.log(vue2中的生命周期已销毁（未安装));
},
setup() {
console.log(vue3中的设置);
const name=ref( hhh )；
const updateName=()={
姓名。value= 6……6……6 ；
};
onBeforeMount(()={
console.log(vue3中的生命周期onBeforeMount’)；
});
onMounted(()={
console.log(vue3中的生命周期安装上’)；
});
onBeforeUpdate(()={
console.log(vue3中的生命周期onBeforeUpdate ")；
});
未更新(()={
console.log(vue3中的生命周期未更新);
});
onBeforeUnmount(()={
console.log(vue3中的生命周期onBeforeUnmount’)；
});
未安装(()={
console.log(vue3中的生命周期在未安装的’)；
});
返回{
姓名，
updateName，
};
},
});
/脚本
运行起来的显示效果
进入页面按f12打开调试刷新页面
可以看出vue3中
设置执行在创建前与创造前面；出发前执行在即将挂载前面；已安装执行在安装好的前面；点击更新名字
可以看出vue3中
更新前执行在更新前前面；未更新执行在更新前面；点击切换儿童子组件的显示
可以看出vue3中
onBeforeUnmount执行在销毁前前面；未安装的执行在破坏前面；
三种情况下的生命周期执行顺序
生命周期：在创建一个某视频剪辑软件实例时，会经历一系列的初始化过程(Vue实例从创建到销毁的过程),这个过程就是某视频剪辑软件的生命周期。
某视频剪辑软件提供给开发者的一系列的回调函数，方便我们添加自定义的逻辑，Vue的生命周期从创建到销毁，重要的节点挂载数据更新。
创建阶段创建前、已创建挂载渲染页面阶段安装前、安装后更新阶段更新前、更新后卸载阶段毁灭前
1、单页面下生命周期顺序
献上一波代码，看下各周期钩子函数的执行顺序：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
titlevue生命周期学习/标题
脚本src= https://cdn。bootcss。com/vue/2。4 .2/vue。js /脚本
/头
身体
div id=应用程序
h1{{message}}/h1
/div
/body
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“Vue的生命周期
},
创建之前：函数(){
console.group( -创建前创建前状态- );
console.log(%c%s ， color:red ， el : this .$ El)；//未定义
console.log(%c%s ， color:red ， data : this .$ data)；//未定义
console.log(%c%s ， color:red ， message: this.message)
},
已创建：函数(){
console.group( -已创建创建完毕状态- );
console.log(%c%s ， color:red ， el : this .$ El)；//未定义
console.log(%c%s ， color:red ， data : this .$ data)；//已被初始化
console.log(%c%s ， color:red ， message: this.message ).//已被初始化
},
安装前：函数(){
console.group( -在装载之前挂载前状态- );
console.log(%c%s ， color:red ， el : (this .$ El))；//已被初始化
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；//已被初始化
console.log(%c%s ， color:red ， message: this.message ).//已被初始化
},
已安装：函数(){
控制台。组(-安装挂载结束状态- );
console.log(%c%s ， color:red ， el : this .$ El)；//已被初始化
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；//已被初始化
console.log(%c%s ， color:red ， message: this.message ).//已被初始化
},
更新之前：函数(){
console.group(更新前更新前状态===============》);
console.log(%c%s ， color:red ， el : this .$ El。innerhtml)；
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；
console.log(%c%s ， color:red ， message: this.message ).
},
已更新：函数(){
console.group(已更新更新完成状态===============》);
console.log(%c%s ， color:red ， el : this .$ El。innerhtml)；
console.log(这个$ El)；
console.log(%c%s ， color:red ， data : this .$ data)；
console.log(%c%s ， color:red ， message: this.message ).
},
销毁前：函数(){
console . group( before destroy status===========" )；
console.log(%c%s ， color:red ， el : this。$ El)；
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；
console.log(%c%s ， color:red ， message: this.message )。
},
已销毁：函数(){
Console.group(destroyed销毁完成状态===========" )；
console.log(%c%s ， color:red ， el : this。$ El)；
console.log(这个。$ El)；
console.log(%c%s ， color:red ， data : this。$ data)；
console.log(%c%s ， color:red ， message: this.message)
}
})
/脚本
/html
（1）创建阶段：初始化事件，进行数据的观测
New Vue({})创建一个空的实例对象，上面只有生命周期函数和一些默认事件。当beforeCreate，$el和data没有初始化为created execution，这就完成了数据的初始化，并通过编译将模板template转换为render函数。执行渲染函数以获得一个虚拟节点树(在内存中)。首先，检查模板是否存在。如果有模板，就编译成render函数，不要把外部的html渲染成模板。综合排名优先级：渲染函数选项模板选项外层HTML。
（2）挂载阶段
将$el成员添加到vue实例，替换挂载的DOM成员。当beforeMount，el和data初始化，但是el和data都是，但是el还是用{{message}}来占用挂载的。执行时，会呈现消息的值。
（3）更新阶段：触发对应组件的重新渲染
当数据改变时，生命周期函数beforeUpdate被触发。数据是最新的，页面没有更新(旧页面)。根据最新数据，重新渲染虚拟DOM并挂载到页面上，完成Model to View的更新执行。此时，数据和页面都是最新的。
（4）销毁阶段
销毁实例之前调用beforeDestroy挂钩函数。在这一步，实例仍然完全可用。销毁钩子函数在销毁Vue实例后被调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。
2、父子、兄弟组件的生命周期顺序
模板
div class=父亲
组件-A class= son _ A /组件-A
组件-B class= son _ B /组件-B
/div
/模板
//脚本部分和代码一样，就不多写了。
主要可以从以下几种情况来分析：
（1）创建过程：
parent before create-parent created-parent before mount-child before create-child created-child before mount-child mount-parent mount
（2）组件的内部更新：
子组件的内部更新流程是：更新前的子组件-更新后的子组件。
同样，父组件的内部更新过程是：更新前的父组件-更新后的父组件。
（3）组件之间的更新：
当子组件使用emit修改父组件的状态时，该状态被绑定到子组件的props。更新流程为：父更新前-子更新前-子更新后-父更新后。
（4）父子组件销毁：
当父组件被销毁时，子组件也被销毁。销毁的钩子过程是：父销毁前-子销毁前-子销毁-父销毁。
父子组件的完整生命周期图如下：
从上图可以看出，在挂载父组件、兄弟组件和子组件之前，每个组件的实例都已经初始化了。子组件安装后，父组件尚未安装。因此，当组件数据回显时，在安装的父组件中获得api数据，但是不能获得子组件的安装。仔细看看父子组件生命周期钩子的执行顺序，你会发现创建的钩子是由外向内执行的。因此，echo场景的解决方案是在created中发起获取数据的请求，然后在created中依次接收子组件的数据。Vu父子组件生命周期钩子的执行顺序遵循：从外到内，再从内到外，无论嵌套多深，也遵循这个规则。
3、不同页面跳转时各页面生命周期的执行顺序
跳转到不同页面的原理与第二部分相同。从第一页(index)跳转到下一页(secondIndex)时，首先初始化secondIndex，然后销毁索引页，最后挂载secondIndex。
题外话：
在开发过程中，通过了解整个生命周期，我们可以清楚地知道在什么阶段可以做什么，或者应该在什么阶段进行一个操作。
例如，create中的数据操作、mounted中的DOM完成后的操作、event unbinding和destroyed中的函数注销。
当然要多了解组件与不同页面跳转之间的生命周期顺序，避免页面渲染数据错误或者根本没有数据。
综上所述，在正确的时间做正确的事，可以事半功倍~
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。