ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue:三种情况下的生命周期执行顺序

2021-04-09 17:01:10  阅读:81  来源: 互联网

标签:el 生命周期 console log color Vue data red 顺序


生命周期:在创建一个vue实例时,会经历一系列的初始化过程(Vue实例从创建到销毁的过程),这个过程就是vue的生命周期。
Vue提供给开发者的一系列的回调函数,方便我们添加自定义的逻辑,Vue的生命周期从创建到销毁,重要的节点挂载数据更新。
创建阶段 beforeCreate、created
挂载渲染页面阶段 beforeMount、mounted
更新阶段 beforeUpdate、updated
卸载阶段 beforeDestory、destoryed

1、单页面下生命周期顺序

献上一波代码,看下各周期钩子函数的执行顺序:

<!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>vue生命周期学习</title>
	<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
	<h1>{{message}}</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Vue的生命周期'
        },
        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.innerHTML);
            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.innerHTML);
            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>
</html>

(1)创建阶段:初始化事件,进行数据的观测

  • new Vue({}) 创建一个空的实例对象,这个对象上只有生命周期函数和一些默认事件
  • 在beforeCreate时,$el和data都未初始化
  • created 执行,完成了对data的初始化,通过编译将 template 模板转换成渲染函数( render ) ,执行渲染函数就可以得到一个虚拟节点树(内存中)
  • 先检查 template是否存在 如果存在模板编译成render函数,没有将外部html作为模板渲染。综合排名优先级:render函数选项 > template选项 > outer HTML.
    在这里插入图片描述
    (2)挂载阶段
  • 为vue实例添加$el成员,替换挂载的DOM成员
  • 其中在beforeMount时,初始化 e l 和 d a t a , 但 el和data,但 el和data,但el还是使用{{message}}进行占位
  • mounted执行时,将message的值进行渲染
    在这里插入图片描述
    (3)更新阶段:触发对应组件的重新渲染
  • data 被改变时触发生命周期函数 beforeUpdate 执行,data是最新的,页面还未更新(旧的页面)
  • 根据最新的 data 重新渲染虚拟 DOM,并挂载到页面上,完成 Model 到 View 的更新
  • updated 执行,此时 data 和页面都是最新的
    在这里插入图片描述
    (4)销毁阶段
  • beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

2、父子、兄弟组件的生命周期顺序

<template>
	<div class="father">
		<component-A class="son_A"></component-A>
		<component-B class="son_B"></component-B>
	</div>
</template>

// script部分同上代码,不多写了。

在这里插入图片描述
在这里插入图片描述

  • 从上图可以看出,在父兄子组件挂载前,各组件的实例已经初始化完成。

  • 子组件挂载完成后,父组件还未挂载。所以组件数据回显的时候,在父组件mounted中获取api的数据,子组件的mounted是拿不到的。

  • 仔细看看父子组件生命周期钩子的执行顺序,会发现created这个钩子是按照从外内顺序执行,所以回显场景的解决方案是:在created中发起请求获取数据,依次在子组件的created中会接收到这个数据。

  • Vue父子组件生命周期钩子的执行顺序遵循:从外到内,然后再从内到外,不管嵌套几层深,也遵循这个规律。

3、不同页面跳转时各页面生命周期的执行顺序

跳转不同页面和part2是相同的原理,从第一个页面(index)跳转到下一个页面(secondIndex)时,回先初始化secondIndex,之后在执行index页面的销毁阶段,最后secondIndex挂载完成.
在这里插入图片描述
在这里插入图片描述

标签:el,生命周期,console,log,color,Vue,data,red,顺序
来源: https://blog.csdn.net/qq_16858683/article/details/115544163

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有