ホームページ  >  記事  >  ウェブフロントエンド  >  vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

PHPz
PHPz転載
2023-05-16 21:40:332239ブラウズ

vue2 と vue3 のライフサイクルの実行順序の違い

ライフサイクルの比較

  • vue2 の実行順序beforeCreate= > 作成済み =>beforeMount =>mounted=>beforeUpdate =>updated= > beforeDestroy=>destroyed

  • vue3 の実行シーケンスsetup=>onBeforeMount=> onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted

対応

vue2->vue3

  • ##前作成 ->セットアップ

  • 作成 -> セットアップ

  • #beforeMount

    -> onBeforeMount

  • ##mounted
  • ->

    onMounted

  • 更新前
  • ->

    on更新前

    #更新済み
  • - > ;
  • onUpdated

    ##beforeDestroy

    ->
  • onBeforeUnmount
  • ##destroyed

    ->
  • onUnmounted
  • vue3 のセットアップは beforeCreate と同等で、vue2 で作成されますが、実行は beforeCreate より前に行われ、作成されます。したがって、セットアップでは、データとメソッド内のデータとメソッドを使用することはできません。つまり、これを操作することはできません。セットアップのこれは未定義に相当し、セットアップで作成された変数とメソッドは最終的に return を通じて返されるため、セットアップのプログラムで実行できるのは、戻り値が非同期オブジェクトのみを受け入れ、オブジェクトがセットアップで定義された変数とメソッドを返し、親コンポーネントが Suspense タグを使用して非同期コンポーネントをラップする場合を除き、非同期にすることはできません。 #vue2 の beforeDestroy を vue3 で使用したい場合は、destroy の名前をそれぞれ beforeUnmount、unmounted に変更する必要があります。

    vue2 の書き込みメソッドが vue3 でも使用されている場合は、vue3 の書き込みメソッドが最初に実行されます;
簡単な例の説明

親コンポーネント App.vue

<template>
  <h2>App父级组件</h2>
  <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>
  <h3>child 子级组件</h3>
  <h4>{{ name }}</h4>
  <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 を押してデバッグ更新ページを開きます。

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

# ことがわかります。 vue3 の vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

##setup

は beforeCreate と前に作成された間で実行され、

  • #onBeforeMount

    は beforeMount の前に実行されます。

  • #onMounted
  • はマウントされた ;

    クリックして名前を更新する前に実行されます
  • vue3 の

vue2 と vue3 のライフサイクルの実行順序の違いは何ですかonBeforeUpdate

が beforeUpdate の前に実行されることがわかります。

    onUpdated
  • は updated の前に実行されます;

    クリックして子サブコンポーネントの表示を切り替えます
  • #vue3
  • onBeforeUnmount

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか が beforeDestroy の前で実行されることがわかります。

##onUnmounted

は破棄される前に実行されます;
  • 3 つのケースにおけるライフサイクル実行シーケンス

    #ライフサイクル: vue インスタンスを作成すると、一連の初期化プロセス (Vue インスタンスの作成から破棄までのプロセス) が実行されます。このプロセスが vue サイクルのライフサイクルです。
  • Vue は、カスタム ロジックの追加を容易にするために、開発者に一連のコールバック関数を提供します。Vue のライフ サイクルは、作成から破棄、および重要なノード マウント データの更新までです。

    Create の前に作成フェーズを作成、作成済み

Mount の前にレンダリング ページをマウント、マウントされます

Update Update 前のステージ、更新済み
  • #Destory 前のアンインストール ステージ、破棄
  • 1、単一ページのライフ サイクル シーケンス
  • Wave コードの提示、各サイクルフック関数の実行シーケンスを見てください:

    <!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">
    	<h2>{{message}}</h2>
    </div>
    </body>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Vue的生命周期&#39;
            },
            beforeCreate: function() {
                console.group(&#39;------beforeCreate创建前状态------&#39;);
                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(&#39;------created创建完毕状态------&#39;);
                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(&#39;------beforeMount挂载前状态------&#39;);
                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(&#39;------mounted 挂载结束状态------&#39;);
                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(&#39;beforeUpdate 更新前状态===============》&#39;);
                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(&#39;updated 更新完成状态===============》&#39;);
                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(&#39;beforeDestroy 销毁前状态===============》&#39;);
                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(&#39;destroyed 销毁完成状态===============》&#39;);
                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) 作成フェーズ: イベントを初期化し、データを観察します
新しい Vue ({}) は空のインスタンス オブジェクトを作成します。このオブジェクトにはライフ サイクル関数といくつかのデフォルト イベントのみが含まれます。

beforeCreate では、$el もデータも初期化されません

実行が作成され、データの初期化が完了し、コンパイルによってテンプレートをレンダリング関数 (render) に変換し、レンダリング関数を実行して仮想ノード ツリー (メモリ内) を取得します。
  • 如果有模板文件,则编译成渲染函数;如果没有,则使用外部 HTML 作为模板进行渲染。综合排名优先级:render函数选项 > template选项 > outer HTML.

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

(2)挂载阶段

  • 为vue实例添加$el成员,替换挂载的DOM成员

  • 其中在beforeMount时,初始化el和data,但el和data,但el和data,但el还是使用{{message}}进行占位

  • mounted执行时,将message的值进行渲染

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

(3)更新阶段:触发对应组件的重新渲染

  • data 被改变时触发生命周期函数 beforeUpdate 执行,data是最新的,页面还未更新(旧的页面)

  • 根据最新的 data 重新渲染虚拟 DOM,并挂载到页面上,完成 Model 到 View 的更新

  • updated 执行,此时 data 和页面都是最新的

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

(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

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

(2)组件的内部更新:

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

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

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

(3)组件之间的更新:

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

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか 

(4)父子组件销毁:

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

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

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

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

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

  • 子组件挂载完成后,父组件还未挂载。因此,在父组件的mounted钩子中获取API数据时,子组件的mounted钩子无法获取到该数据。

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

  • 无论嵌套多少层,Vue父子组件的生命周期钩子执行顺序都是从外到内再从内到外。

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

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

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

vue2 と vue3 のライフサイクルの実行順序の違いは何ですか

以上がvue2 と vue3 のライフサイクルの実行順序の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。