vue2与vue3中生命周期执行顺序的区别说明

目录
  • vue2与vue3中生命周期执行顺序区别
    • 生命周期比较
    • 简单例子说明
  • 三种情况下的生命周期执行顺序
    • 1、单页面下生命周期顺序
    • 2、父子、兄弟组件的生命周期顺序
    • 3、不同页面跳转时各页面生命周期的执行顺序

vue2与vue3中生命周期执行顺序区别

生命周期比较

  • vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destroyed
  • vue3中执行顺序 setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted

对应关系

vue2->vue3

  • beforeCreate->setup
  • created -> setup
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted

其中 vue3中的setup相当于vue2中beforeCreate 与created 但是的执行在beforeCreate 与created之前，所以setup无法使用 data 和 methods 中的数据和方法,即无法操作this,setup中的this等于 undefined,又因为setup中创建的变量与方法最后都要通过return返回出去,所以setup中的程序只能是同步的，而不能是异步,除非return 后面只接受一个异步对象，对象返回setup内定义的变量与方法，然后父组件使用Suspense标签包裹异步组件;

vue3中 如果要使用vue2的beforeDestroy与destroyed需要把名称分别改为beforeUnmount,unmounted

如果vue3中同时使用了vue2的写法，vue3的写法会优先执行;

简单例子说明

父组件App.vue

<template>
  <h1>App父级组件</h1>
  <button @click="childShow = !childShow">切换child子组件的显示</button>
  <hr />
  <child v-if="childShow" />
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
//引入子组件
import child from "./components/child.vue";
export default defineComponent({
  name: "App",
  components: {
    child,
  },
  setup() {
    const childShow = ref(true);
    return {
      childShow,
    };
  },
});
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>

子组件child.vue

<template>
  <h2>child 子级组件</h2>
  <h3>{{ name }}</h3>
  <button @click="updateName">更新name</button>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
} from "vue";
export default defineComponent({
  name: "child",
  //vue2中的生命周期钩子
  beforeCreate() {
    console.log("vue2 中的生命周期 beforeCreate");
  },
  created() {
    console.log("vue2 中的生命周期 created");
  },
  beforeMount() {
    console.log("vue2 中的生命周期 beforeMount");
  },
  mounted() {
    console.log("vue2 中的生命周期 mounted");
  },
  beforeUpdate() {
    console.log("vue2 中的生命周期 beforeUpdate");
  },
  updated() {
    console.log("vue2 中的生命周期 updated");
  },
  // vue2中的 beforeDestroy与 destroyed已经改名 无法使用
  beforeUnmount() {
    console.log("vue2 中的生命周期 beforeDestroy(beforeUnmount)");
  },
  unmounted() {
    console.log("vue2 中的生命周期 destroyed(unmounted)");
  },
  setup() {
    console.log("vue3中的setup");
    const name = ref("hhh");
    const updateName = () => {
      name.value += "6……6………6";
    };
    onBeforeMount(() => {
      console.log("vue3 中的生命周期 onBeforeMount");
    });
    onMounted(() => {
      console.log("vue3 中的生命周期 onMounted");
    });
    onBeforeUpdate(() => {
      console.log("vue3 中的生命周期 onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("vue3 中的生命周期 onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("vue3 中的生命周期 onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("vue3 中的生命周期 onUnmounted");
    });
    return {
      name,
      updateName,
    };
  },
});
</script>

运行起来的显示效果

进入页面 按f12 打开调试 刷新页面

可以看出vue3中

  • setup执行在beforeCreate与created前面；
  • onBeforeMount执行在beforeMount前面；
  • onMounted执行在mounted前面；

点击 更新name

可以看出vue3中

  • onBeforeUpdate执行在beforeUpdate前面；
  • onUpdated执行在updated前面；
  • 点击 切换child子组件的显示

可以看出vue3中

  • onBeforeUnmount执行在beforeDestroy前面；
  • onUnmounted执行在destroyed前面；

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

生命周期：在创建一个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时，初始化el和data，但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部分同上代码，不多写了。

主要可以从以下几种情况分析：

（1）创建过程：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

（2）组件的内部更新：

子组件的内部更新过程是：子beforeUpdate->子updated

同理父组件的内部更新过程也是：父beforeUpdate->父updated

（3）组件之间的更新：

当子组件使用emit修改父组件状态时，刚好这个状态又绑定在子组件的props上，更新过程是：父beforeUpdate->子beforeUpdate->子updated->父updated

（4）父子组件销毁：

父组件被销毁时子组件也同时被销毁，销毁的钩子过程是：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

父子组件完整的生命周期图如下所示：

  • 从上图可以看出，在父兄子组件挂载前，各组件的实例已经初始化完成。
  • 子组件挂载完成后，父组件还未挂载。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。
  • 仔细看看父子组件生命周期钩子的执行顺序，会发现created这个钩子是按照从外内顺序执行，所以回显场景的解决方案是：在created中发起请求获取数据，依次在子组件的created中会接收到这个数据。
  • Vue父子组件生命周期钩子的执行顺序遵循：从外到内，然后再从内到外，不管嵌套几层深，也遵循这个规律。

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

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

题外话：

在开发过程中，通过对整个生命周期的了解，就可以很清晰地知道可以在什么阶段做什么事，或者某一操作应该在什么阶段执行

例如在create中进行数据操作，在mounted中进行DOM完成后的操作，在destroyed进行事件解绑和功能注销

当然，对于组件间、不同页面跳转的生命周期顺序也应该更加了解，避免页面渲染数据错误或根本拿不到数据等情况

总结来说就是在合适的时机做对的事情，才能事半功倍嘛～

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 深入了解vue2与vue3的生命周期对比

    目录 周期对比 用法 总结 周期对比 vue2 vue3 beforeCreate setup created setup beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated activeted onActiveted deactiveted onDeactiveted beforeDestory onBeforeUnmount destoryed onUnmounte

  • 稍微学一下Vue的数据响应式（Vue2及Vue3区别）

    稍微学一下Vue的数据响应式（Vue2及Vue3区别）

    什么是数据响应式 从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom. 换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改. 因此实现数据响应式有两个重点问题: 如何知道数据发生了变化? 如何知道数据变化后哪里需要修改? 对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

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

  • vue2与vue3中生命周期执行顺序的区别说明

    vue2与vue3中生命周期执行顺序的区别说明

    目录 vue2与vue3中生命周期执行顺序区别 生命周期比较 简单例子说明 三种情况下的生命周期执行顺序 1.单页面下生命周期顺序 2.父子.兄弟组件的生命周期顺序 3.不同页面跳转时各页面生命周期的执行顺序 vue2与vue3中生命周期执行顺序区别 生命周期比较 vue2中执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destro

  • Vue实例中生命周期created和mounted的区别详解

    Vue实例中生命周期created和mounted的区别详解

    前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注

  • Vue2 模版指令元素绑定事件执行顺序解析

    目录 Vue 自定义指令的执行机制 前情提要 DOM绑定 源码 directive 为什么先调用模版绑定的方法,再调用指令的方法 总结 Vue 自定义指令的执行机制 version: 2.6.14 前情提要 某日,业务需要我需要在按钮点击之前验证某些条件,如果不符合即不执行click内的业务代码.思前想后,写一个指令不就可以了.做到既不改动原有的业务代码,又可以移植. <template> <button v-capture @click="handleClick"&

  • vue3.0生命周期的示例代码

    在组件化的框架中,比如Angular.React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时,在这个过程中也会运行一些叫做生命周期钩子的函数,它们提供给用户在组件的不同阶段添加自己的代码的机会. 使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了,因为在实际的开发过程中我们多多少少会用到他们,比如 created.mounted.destoryed等等.

  • Springboot事件和bean生命周期执行机制实例详解

    目录 @PostConstruct执行机制 ContextRefreshedEvent事件机制 ApplicationStartedEvent事件机制 总结 细节问题 原因 @PostConstruct执行机制 进入SpringApplication#run(java.lang.String…) public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); st

  • Unity3D中脚本的执行顺序和编译顺序

    Unity3D中脚本的执行顺序和编译顺序

    事件函数的执行顺序 先说一下执行顺序吧. 官方给出的脚本中事件函数的执行顺序如下图: 我们可以做一个小实验来测试一下: 在Hierarchy视图中创建三个游戏对象,在Project视图中创建三条脚本,如下图所示,然后按照顺序将脚本绑定到对应的游戏对象上: 三条脚本的代码完全一样,只是做了一点名称上的区分: using UnityEngine;using System.Collections;public class Scring0 : MonoBehaviour{    void Awake()

  • C#类中方法的执行顺序是什么

    C#类中方法的执行顺序是什么

    有些中级开发小伙伴还是搞不太明白在继承父类以及不同场景实例化的情况下,父类和子类的各种方法的执行顺序到底是什么,下面通过场景的举例来重新认识下方法的执行顺序: (下面内容涉及到了C#中的继承,构造函数,虚方法,虚方法的重写,new关键字等知识点) 场景一 有子类继承,但是只实例化父类:只执行A对象,输出A对象的信息 class A { public A() => Console.WriteLine("A的构造函数"); public virtual void Fun() =>

  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

    目录 一.生命周期定义 二.生命周期流程 三.总结 一.生命周期定义 生命周期:又名:生命周期回调函数.生命周期函数.生命周期钩子 生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的 this 指向是 vm 或组件实例对象 做一个小例子,要求页面的文字一上来透明度就周而复始的从1变到0 <div id="root"> <h2 :style="{opaci

随机推荐