Vue生命周期介绍和钩子函数详解

2024-10-19 01:53:40

Vue生命周期介绍和钩子函数

组件每个阶段它的内部构造是不一样的，所以一般特定的钩子做特定的事，比如Ajax获取数据就可以在mounted阶段。从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期，在这个生命周期内发生了下面的事情：从vue实例被创建开始，首先vue实例被创建，之后开始数据的初始化，编译模板，挂载dom，渲染dom,更新对象属性，渲染dom，解绑销毁。

VUE生命周期钩子

生命周期钩子又被叫做生命周期时间，生命周期函数，生命周期钩子就是vue生命周期中出发的各类事件，这些事件被称为生命周期钩子，在vue生命周期中，大部分分为四个阶段，创建，挂在，更新，销毁，这四个阶段各自对应两个生命周期钩子

一、创建部分(create)，就是vue实例被初始化，简单的说就是我们在代码中进行了这个操作 var app = new Vue() ,之后就进入的vue生命周期的创建阶段。在创建阶段中会有两个提供给我们可编程的接口，分别是beforeCreate 和 created。这两个接口都是在创建阶段触发，但是两个接口又有所不同，beforeCreate比created要先触发，即vue实例初始化后，没有进行数据读取前就触发，如果在此时进行读取data中的数据就会提示unfined。 created 是在实例创建完成后再被调用，此时data中的数据已经写入完成，但是还没有进行dom的挂载，也就还没有与页面进行关联，下面进入挂载阶段。

二、挂载阶段(mount)，该阶段就是将页面中dom挂载到实例化后的vue对象上。简单的说就是执行了 el: ‘#dom'。该阶段同样有两个接口供我们进行编程，分别是 beforemount 和 mounted 。这两个接口的主要区别在与以有没有将dom挂载到实例对象上，beforemount 是在挂载之前触发，仅对模板进行解析，如果此时输出需要挂载的dom的innerHTML的话，会将模板原样输出，并没有将数据进行渲染。 mounted 实在dom挂载之后，可以将data中的数据渲染的页面上。该阶段之后就进入更新阶段。

三、更新阶段(update)，该阶段是在页面上的数据在第一次加载之后再次进行更新的时候。同样对应两个接口 beforeupdate 和 update。这两个接口的差异主要在于有没有对页面dom进行渲染。在我们对data中的数据进行修改，且修改完成后触发 beforeupdate ，此时data中的属性值已经是修改完成的状态，但是没有对页面的dom进行渲染。update 就是将数据渲染到页面上。至此vue的生命周期已经进行到更新阶段，在正常的使用中我们会多次的经常处于更新阶段，对页面的数据进行各种修改。但是为了满足将不必要的事件关闭，释放内存，就还需要销毁阶段。
四、销毁阶段(destory)，在一个实列被销毁后，该实例所绑定的所有事件都会失效，监听器也会被移出。该阶段对应两个接口 beforeDestroy 和 destroy。deforeDestory是在实例需要被销毁但是还没有先回之前调用，此时该实例的的绑定的各类事件、监听器仍然可用。 destroy是在实例销毁后调用，此时该实例的所有东西都不能使用，但是页面上的数据仍保持页面最后一次渲染的数据。

Vue生命周期简介

上面描述的几个阶段

使用代码观察钩子函数

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
 <div id="app">
     <p>{{ message }}</p>
</div>
 <script type="text/javascript">
   var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy"
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined
               console.log("%c%s", "color:red","message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data);
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

create 和 mounted 相关

beforecreated：el 和 data 并未初始化

created:完成了 data 数据的初始化，el没有

beforeMount：完成了 el 和 data 初始化

mounted ：完成挂载

另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

update 相关

destroy 相关

有关于销毁，暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

总结

beforecreate : 举个例子：可以在这加个loading事件

created ：在这结束loading，还做一些初始化，实现函数自执行

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单
深入理解Vue父子组件生命周期执行顺序及钩子函数

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子生命周期钩子详细 beforeCreate 在实例
Vue 2.0中生命周期与钩子函数的一些理解

前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的. 因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚. 于是我开始先去搜索,发现vue2.0的生命周期没啥文章.大多是1.0的版本介绍.最后还是找到一篇不错的(会放在最后) vue生命周期简介咱们从上图可以很明显的看出现在vue2.0
vue生命周期与钩子函数简单示例

本文实例讲述了vue生命周期与钩子函数.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue生命周期与钩子函数</title> <style> </style> <script src="https://
Vue生命周期介绍和钩子函数详解

目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关总结 Vue生命周期介绍和钩子函数组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do
基于Vue2.X的路由和钩子函数详解

最近上班有些忙,好久没有更新文章,也没学习新的东西. 今天来说说这个路由钩子吧. 导航和钩子函数: 导航:路由正在发生改变关键字:路由变钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数). 钩子函数主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做.. 导航在所有钩子 resolve 完之前一直处于等待中,等待钩子函数告诉它下一步该怎么做.用next()来指定. 我来给大家举
Spring生命周期回调与容器扩展详解

本篇主要总结下Spring容器在初始化实例前后,提供的一些回调方法和可扩展点.利用这些方法和扩展点,可以实现在Spring初始化实例前后做一些特殊逻辑处理. 下面主要介绍: 类级别的生命周期初始化回调方法init-method配置.InitializingBean接口和PostConstruct注解容器级别的扩展BeanPostProcessor接口和BeanFactoryPostProcessor接口 1.类级别生命周期回调 1.1init-method 参照:Springbeanxsdin
Vue3生命周期钩子函数详解

本文实例为大家分享了Vue3生命周期钩子函数的具体代码,供大家参考,具体内容如下一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数:onMounted() : 组件挂载完成后执行的函数:onBeforeUpdate(): 组件更新之前执行的函数:onUpdated(): 组件更新完成之后执行的函数:onBeforeUnm
微信小程序生命周期和WXS使用实例详解

目录引言生命周期生命周期分类生命周期函数生命周期函数分类 WXS wxs 和 JavaScript 的关系* 内嵌 wxs 脚本外联 wxs 脚本 WXS特点总结引言经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助. 生命周期生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段,强调的是一个
Android开发中Activity的生命周期及加载模式详解

本文给大家介绍Activity的生命周期,如果大家学习过iOS的小伙伴的话,Activity的生命周期和iOS中ViewController的生命周期非常类似.生命周期,并不难理解.一个人的生命周期莫过于生老病死,花儿的生命周期就是花开花谢了.在Android中Activity的生命周期莫过于Activity的创建到消亡的过程了.本篇博客就会介绍Activity生命周期中的不同阶段,通过实例的形式来窥探一下Activity的生命周期.搞明白Activity的生命周期是至关重要的,因为只有搞明白每
Android Activity生命周期和堆栈管理的详解

Activity的生命周期 Activity是Android中的四大组件之一,也是最基本,最重要的组件,是android系统提供一个可视化的,能与用户交换的组件. 系统提供的组件,不需要用户实例化,用户也不能实例化,是系统进行回调,例如web开发的servlet也是系统提供的,和android 的其他系统组件一样. 那么不需要我们实例化我们怎么用呢,这些组件都有相同的特点就是: 1.都需要在配置文件中注册 2.都需要自定义类去继承系统的Api 3.都有自己的生命周期那么Activity的生命周
Asp.Net Core中服务的生命周期选项区别与用法详解

前言最近在做一个小的Demo中,在一个界面上两次调用视图组件,并且在视图组件中都调用了数据库查询,结果发现,一直报错,将两个视图组件的调用分离,单独进行,却又是正常的,寻找一番,发现是配置依赖注入服务时,对于服务的生命周期没有配置得当导致,特此做一次实验来认识三者之间(甚至是四者之间的用法及区别). 本文demo地址(具体见WebApi控制器中):https://gitee.com/530521314/koInstance.git (本地下载) 一.服务的生命周期在Asp.Net Core
Android Activity生命周期和堆栈管理的详解

Activity的生命周期 Activity是Android中的四大组件之一,也是最基本,最重要的组件,是android系统提供一个可视化的,能与用户交换的组件. 系统提供的组件,不需要用户实例化,用户也不能实例化,是系统进行回调,例如web开发的servlet也是系统提供的,和android 的其他系统组件一样. 那么不需要我们实例化我们怎么用呢,这些组件都有相同的特点就是: 1.都需要在配置文件中注册 2.都需要自定义类去继承系统的Api 3.都有自己的生命周期那么Activity的生命周
Spring Bean生命周期之Bean的注册详解

目录前言 BeanFactory的继承体系 Bean的注册 alias别名的注册总结前言上篇文章介绍了Bean元信息的配置与解析过程,限于篇幅Bean注册过程就没展开. 这里主要围绕BeanDefinitionReaderUtils#registerBeanDefinition展开分析下Bean注册过程 public static void registerBeanDefinition( BeanDefinitionHolder definitionHolder, BeanDefinit