Vue中的生命周期介绍

什么是vue的生命周期

Vue中的生命周期是指组件从创建到销毁的一系列过程。看下面这张官方文档的图:

从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为:

  • beforeCreate
  • Created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

Vue组件的生命周期共分为三个阶段,如下图所示:

创建阶段和销毁阶段在组件的生命周期中只会执行一次,而更新阶段会执行多次。

先看一下创建阶段完成的事情:

在看更新阶段完成的事情:

最后在看一下销毁阶段完成的事情:

先看下面的一段代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生命周期</title>
    <!--引入vue.js-->
    <script src="./js/vue.js" ></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',// 2.0不允许挂载到html,body元素上
                data:{
                    msg:'welcome'
                },
                methods:{
                    update(){
                        this.msg="欢迎";
                    },
                    destroy(){
                        this.$destroy();
                    }
                },
                //创建前状态  el和data并未初始化
                beforeCreate(){
                    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.msg)
                    console.log('组件实例刚刚创建,还未进行数据观测和事件配置');
                },
                created(){//常用  创建完毕状态   完成了data数据的初始化  el没有
                    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.msg); //已被初始化
                    console.log("实例已经创建完成,并且已经进行数据观测和事件配置")
                },
                beforeMount(){  //挂载前状态 完成了el和data初始化
                    this.msg="112233";
                    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.msg); //已被初始化
                    console.log("模板编译之前,还没挂载");
                },
                mounted(){//常用  挂载结束状态  完成挂载
                    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.msg); //已被初始化
                    console.log("模板编译之后,已经挂载,此时才会有渲染页面,才能看到页面上数据的显示")
                },
                beforeUpdate(){   //更新前状态
                    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.msg);
                },
                updated(){   //更新完成状态
                    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.msg);
                },
                beforeDestroy(){   //销毁前状态
                    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.msg);
                },
                destroyed(){  //销毁完成状态
                    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.msg)
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg" />
        <button @click="update">更新数据</button>
        <button @click="destroy">销毁组件</button>
    </div>
</body>
</html>

在控制台的console里面查看运行后的效果:

然后点击“更新数据”按钮,会看到input绑定的数据发生变化:

数据更新前:

数据更新后:

控制台显示的打印信息:

最后点击“销毁组件”按钮,查看控制台显示的打印信息:

这样,一个完整的Vue实例生命周期就结束了。

注意:Vue组件被销毁以后,这时如果在更新数据就不会有任何反应了,因为组件已经被销毁

到此这篇关于Vue生命周期的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 梳理一下vue中的生命周期

    什么是生命周期? 生命周期,以个人之浅见,即一个事物从诞生到消亡的一个过程! 以人的一生来做类比,其实就可以简单粗暴的将生命周期看作人的一生,人这一出生就开始了一段美好(艰难)的旅程,一生中每个成长的阶段都会对应的去做每个阶段该做的事,比如,上幼儿园,小学,中学,高中,大学,工作(比如我就在辛苦的码字),结婚等等直到百年以后,尘归尘,土归土,这就是人的生命周期! vue也有这样的一个生命周期,也会在执行到每个阶段做一些事情,不同的是vue在每个对应的阶段是通过生命周期函数去做的,此刻再去看一下v

  • Vue之生命周期函数详解

    目录 生命周期函数 常用的生命周期的钩子 关于Vue销毁实例: 总结 生命周期函数 生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子 是什么:Vue在关键时刻帮我们调用一些特殊名称的函数 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 生命周期函数中的this指向的是vm或者组件实例化对象 常用的生命周期的钩子 1.mounted:发送ajax请求,启动定时器,绑定自定义事件 订阅消息等功能[初始化操作] 2.beforeDestory:清除定时器,解绑自定义

  • Vue生命周期中的组件化你知道吗

    目录 引出生命周期 销毁流程 生命周期 生命周期总结 组件化 非单文件组件 组件的几个注意点 组件的嵌套 VueComponent Vue实例与组件实例 总结 引出生命周期 此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change. 销毁流程 解绑(自定义)事件监听器 生命周期 生命周期总结 <div id="root"> <!-- <h2 :style="{opacity}">hello,{{n

  • 浅谈vue的生命周期

    目录 1.什么是生命周期?有什么作用? 2.第一次加载页面会触发哪几个钩子? 3.简述每个周期应用于哪个场景? 4.created和mounted的区别 5.vue在哪个生命周期获取数据? 总结 1.什么是生命周期?有什么作用? 每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想

  • 详解vue生命周期

    目录 为什么要理解生命周期 什么是生命周期 生命周期钩子函数 created和mounted 钩子的一些实战用法 1.异步函数 2.Vue.nextTick对异步函数的结果进行操作 总结 为什么要理解生命周期 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 如果只是单纯地知道vue里面的简单语法,你是可以实现对应的一些项目和对应的想法,但是如果一旦发生问题,我们就需要借助生命周期去寻找问题,甚至说有一些需求的话,你也通过生命周期的情况来定我们该把这个东西写在哪里.所以理解vue的生命周期还

  • Vue的生命周期一起来看看

    目录 1.生命周期(重要) 1.1初步认识生命周期 1.2生命周期流程(8个) 1.3生命周期详细流程图 1.4常用的生命周期钩子: 1.4.1关于销毁 1.4.2关于父子组件的生命周期 1.5小案例 1.6代码举例说明生命周期钩子 总结 1. 生命周期(重要) 1.1 初步认识生命周期 别名:生命周期回调函数.生命周期函数.生命周期钩子. 生命周期是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数内部的具体内容由程序员自行编写 生命周期函数中的this

  • 老生常谈vue的生命周期

    目录 一.什么是生命周期 二.生命周期函数 三.生命周期的流程 四.简单的生命周期代码 总结 一.什么是生命周期 每一个组件都可能经历从创建,挂载,更新,卸载的过程. 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的逻辑代码(比如组件创建完后就请求一些服务器数据) 但是我们如何知道目前组件正在哪一个过程中,vue给我们提供了组件的生命周期函数. 二.生命周期函数 生命周期函数是一个钩子函数,在某一个时间会被vue内部源码进行回调. 通过对生命周期函数的回调,我们知道目前组件正在经历什么

  • Vue 生命周期和数据共享详解

    目录 1.组件的生命周期 1.1生命周期与生命周期函数 1.2组件生命周期函数的分类 1.3生命周期图示以及详解 2.组件之间的数据共享 2.1组件之间的关系 2.2父向子传值 2.3子向父传值 2.4兄弟之间的数据关系 总结 1. 组件的生命周期 1.1 生命周期与生命周期函数 生命周期是指一个组件从 创建 => 运行 => 销毁 的整个时间段,强调的是一个时间段.生命周期函数是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 1.2 组件生命周期函数的分类 1.3

  • 详细聊聊Vue生命周期的那些事

    目录 前言 一.Vue2中的生命周期 实例的生命周期 其它生命周期钩子 二.Vue3中的生命周期 Options API生命周期 Composition API生命周期 两个新的Vue3生命周期函数 最后 前言 如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~ 一.Vue2中的生命周期 实例的生命周期 在介绍生命周期之前,我们需要知道在Vue中要渲染

  • 一起来学习Vue的生命周期

    目录 生命周期 生命周期的简单介绍 beforeCreate与created beforeCreate() created() beforeMount与mounted beforeMount() mounted()(重要) beforeUpdate与updated beforeUpdate() updated() beforeDestroy与destroyed beforeDestroy()(重要) destroyed() 总结 生命周期 生命周期的简单介绍 1.生命周期又叫做:生命周期回调函数

随机推荐