首页 > 其他分享 >生命周期

生命周期

时间:2022-11-14 08:45:29浏览次数:47  
标签:el 生命周期 console log 实例 message data

先给一张vue官网介绍生命周期的流程图


官方给的东西肯定很官方啦,不过单看一张图对理解vue生命周期钩子函数来说肯定还是有些难度的。不过各位小伙伴不要着急,本文 _以简单直接的实例_ 来对此图进行理解。


  • beforeCreate:在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  • created:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据监视(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount:在挂载开始之前被调用相关的 render 函数首次被调用。
  • mounted:el 被新创建的 vm.el 替换,并挂载到实例上去之后调用此钩子函数,如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.el 也在文档内。
  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
  • activated:keep-alive 组件激活时调用。
  • deactivated:keep-alive 组件停用时调用。
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

来吧 上代码!代码直接可以直接运行哦。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue-LifeClyle</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app" class="jing">
        <p>{{message}}</p>
        <keep-alive>
            <jh-component msg="2017年6月9日" v-if="show"></jh-component>
        </keep-alive>
    </div>
</body>
<script>
    var haohao = {
        template: '<div>from haohao: {{msg}}</div>',
        props: ['msg'],
        deactivated: function() {
            console.log('component deactivated!');
        },
        activated: function() {
            console.log('component activated');
        }
    };
    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                message: 'jingjing',
                show: true //控制子组件是否显示
            };
        },
        beforeCreate: function() {
            console.group('beforeCreate Vue实例创建前的状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        created: function() {
            console.group('created Vue实例创建完毕后状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        beforeMount: function() {
            console.group('beforeMount 挂载前状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        mounted: function() {
            console.group('mounted 挂载后状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        beforeUpdate: function() {
            console.group('beforeUpdate 更新前状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            console.log('beforeUpdate = ' + document.getElementsByTagName('p')[0].innerHTML);
        },
        updated: function() {
            console.group('updated 更新完成状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            console.log('Updated = ' + document.getElementsByTagName('p')[0].innerHTML);
        },
        beforeDestroy: function() {
            console.group('beforeDestroy 销毁前状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        destroyed: function() {
            console.group('destroyed 销毁完成状态————————————————————');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        components: {
            'jh-component': haohao
        }
    });
</script>

<style>
    .jing {
        font-size: 50px;
        font-weight: bolder;
    }
</style>

</html>

代码结构不难看懂

创建了一个 app 的Vue根实例,将其挂载到页面 id 为 app 的 Dom 元素上。 然后局部注册了一个组件名为 haohao 并在根实例中将其注册,使其可以在根实例的作用域中使用。 将子组件用 <keep-alive> 包裹,为接下来的测试作准备。

OK,到这里我们就可以在谷歌浏览器中打开开发者工具,开始测试了!


1、beforeCreate 与 created

  • beforeCreate 执行时:datael均未初始化,值为undefined
  • created 执行时:Vue 实例观察的数据对象 data 已经配置好,已经可以得到app.message的值,但 Vue 实例使用的根 DOM 元素el还未初始化

2、beforeMount 与 mounted 和 activated 与 deactivated

  • beforeMount 执行时:datael均已经初始化,但从{{message}} 的展示情况可以看出此时 el 并没有渲染数据,这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面 mounted 挂载的时候再把值渲染上去

  • mounted 执行时:此时 el 已经渲染完成并挂载到实例上

  • 我们在控制台看到component activated被打印出来了,说明子组件jh-component<keep-alive> 包裹,随 el 的挂载而触发了。

  • 然后我们进行一些操作,在控制台输入 app.show = false我们再来看看有什么变化,测试结果如下图:

相关文章

  • React 生命周期函数
    React生命周期图示React的生命周期从广义上分为三个阶段:创建、更新、卸载;创建constructor()constructor()中完成了React数据的初始化,它接受两个参数:props和context,当......
  • 44. 生命周期
    vue的声明周期分为4个阶段,8个钩子函数;第一阶段:创建;beforeCreate:此时的data和method方法未定义undefined created:此时的data数据和methods方法已经定义,......
  • Angular--父子组件生命周期钩子(lifecycle hooks)执行过程
    1.angular组件生命周期钩子执行过程组件初始化过程中,生命周期钩子执行顺序:constructor()构造函数,初始化class,(constructor不属于Angular生命周期钩子的范畴,这里只是......
  • Vue 全部生命周期组件整理
    ​前言今天继续加油学习,今天整理一下VUE中生命周期那有些,平且依次说明给个的使用场景以及作用。嘻嘻嘻,让我们一起学起来好吧~~~come生命周期beforeCreate:在创建组件之前使......
  • Vue生命周期及组件
    目录Vue生命周期钩子钩子函数的由来生命周期钩子函数生命周期图示Vue生命周期钩子钩子函数的由来每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要......
  • Spring bean容器的生命周期是什么样的?
    springbean容器的生命周期流程如下:1.spring容器根据配置中的bean定义中实例化bean。2.spring使用依赖注入填充所有属性,如bean中所定义的配置。3.如果bean实现BeanNameAware......
  • Eotalk Vol.05: API 全生命周期管理,如何解决企业 API 安全问题
    Eotalk是由Eolink和各合作方一起发起的泛技术聊天活动,每期我们会邀请一些技术圈内的大牛聊聊天,聊一下关于技术、创业工作、投融资等热点话题。 本期Eotalk我们邀......
  • 华为云API中心:汇聚千行百业API资产,打造API全生命周期极致体验
    摘要:2022年11月9日,华为云全球生态部总裁康宁在华为全联接大会2022上发表“共创新价值,一切皆服务”主题演讲,并发布全新的华为云API中心。本文分享自华为云社区《华为云API......
  • 账号从HR系统到AD域再到邮箱等应用系统,如何自动化管理员工账号生命周期?
    随着企业的发展壮大,员工数量越来越多,业务系统数量也越来越多,同时伴随着员工入/离职、调岗等情况不断发生,企业IT运维承担着巨大的压力。主要体现在以下几个方面:IT运维成本......
  • IOC、AOP、Bean的生命周期
    IOC简单说准备Spring的上下文环境ApplicationContext扫描XML文件和注解,得到一系列Bean的定义根据Bean进行实例化,依赖注入把Bean放到容器Map里面详细说准备Sp......