Vue的八个生命周期钩子函数详解

时间：2023-04-01 11:06:35 vue.js

摘要：Vue为生命周期中的每一个状态都设置了一个钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，就会触发并调用相应的函数。本文分享自华为云社区《一文带你弄懂Vue八大生命周期钩子函数》，原作者：北极光之夜。.1、速知概念：我们把一个对象从生成（new）到销毁（destory）的过程称为生命周期。生命周期函数是在某个时刻会自动执行的函数。按照官方的说法，每个Vue实例在创建的时候都要经过一系列的初始化过程——比如设置数据监听，编译模板，实例挂载到DOM，创建时更新DOM等。数据变化等。同时，一些称为生命周期钩子的函数也会在这个过程中运行，这让用户有机会在不同的阶段添加自己的代码。简单的说，每个Vue实例在创建的时候都会经历一系列的初始化过程：创建实例、加载模板、渲染模板等等。Vue为生命周期中的每一个状态都设置了一个钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，就会触发并调用相应的函数。2、八个生命周期钩子函数：下面是官方文档中的生命周期图。英语好的同学可以看看：这里插入图片描述3.结合代码理解：先看下案例的基本代码，然后通过下面的代码步骤演示一个生命周期函数在每个阶段执行一个对象从创建到销毁。注意show函数的作用。<元名称="viewport"content="width=device-width,initial-scale=1.0">文档{{information}}

//创建vue实例varvm=newVue({el:'#app',data:{information:'北极光之夜。'}})//每个生命周期函数通过调用以下函数了解其生命阶段functionshow(inf,obj){console.log(inf);console.log("------------------------------------------");console.log('获取vue实例数据中的数据：');控制台日志（obj.information）；console.log("------------------------------------------");console.log('挂载对象为DOM:');控制台日志（obj.$el）；console.log("------------------------------------------");console.log('DOM挂载到页面:');console.log(document.getElementById('app').innerHTML);}1。beforeCreate：这个阶段刚刚在内存中创建了vue实例，此时还没有初始化数据和方法。在案例中添加beforeCreate钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜。'},beforeCreate:function(){//传入本阶段的简介和this，这是vue实例show('vue实例初始化前',this);}})查看运行结果：可以看到，这个vue实例刚在内存中创建的时候，其他的都是undefined。2.created：这个阶段已经在内存中创建了vue实例，数据和方法也可以获取，但是模板还没有编译完成。在case中添加创建的钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜'},created:function(){show('vue之后instanceisinitialized',this);}})看结果：看到没有，你已经知道了data中的数据。没有其他的。3.beforeMount：这个阶段模板编译完成，但是还没有挂载到页面上。在案例中添加一个钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜'},beforeMount:function(){show('挂载前',this);}})看结果：有没有看到要挂载的对象都编译好了，但是页面的DOM树还没有挂载，这个阶段页面还没有显示出来。4.mounted：这个阶段，模板被编译并挂载到页面上，页面也可以显示了。在案例中添加一个钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜。'},mounted:function(){show('挂载后',this);}})看结果：5.beforeUpdate：在transition更新之前执行这个函数，此时data中数据的status值已经更新到最新了，但是页面显示的数据还是最原始的，DOM树的渲染还没有重启。首先更改data中的数据：vm.information='NightoftheNorthernLights';在案例中添加一个钩子函数：varvm=newVue({el:'#app',data:{information:'NorthernLights.'},beforeUpdate:function(){show('beforeupdate',this);}})查看结果：看，vue实例中的数据已经变成了南极光的夜晚。但在这个阶段，页面DOM节点上显示的初始数据仍然是北极光的夜晚。6.updated：这个阶段就是transition完成后执行这个函数。此时data中数据的状态值是最新的，页面显示的数据也是最新的，DOM节点已经重新渲染。在案例中添加一个钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜'},updated:function(){show('更新后',this);}})看运行结果：更新了，全部更新了~7.beforeDestroy：beforeDestroy阶段是在vue实例被销毁之前。当然，这个阶段还是可以使用vue实例的。销毁Vue实例：vm.$destroy();在案例中添加一个钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜。'},beforeDestroy:function(){show('销毁前',this);}})查看效果：8.destroyed：vue实例销毁后调用这个阶段，此时所有实例所指示的一切都会解除绑定，事件监听器也被移除，子实例也被销毁。在案例中添加一个钩子函数：varvm=newVue({el:'#app',data:{information:'北极光之夜'},destroyed:function(){show('销毁后',this);}})查看结果：点击关注，第一时间了解华为云新技术~

上一篇：vue-cli2组件的使用

下一篇：JavaScript之执行环境与作用域的区别与联系

Vue的八个生命周期钩子函数详解相关文章