vue2與vue3中的生命週期執行順序有何不同-Vue.js-PHP中文網

vue2與vue3中生命週期執行順序區別

生命週期比較

App父级组件

child 子级组件

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

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

首頁

web前端

Vue.js

vue2與vue3中的生命週期執行順序有何不同

PHPz

May 16, 2023 pm 09:40 PM

vue3 vue2

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 -&gt ; 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>
  <h2 id="App父级组件">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 id="child-nbsp-子级组件">child 子级组件</h3>
  <h4 id="nbsp-name-nbsp">{{ 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>

登入後複製

運作起來的顯示效果

vue2與vue3中的生命週期執行順序有何不同 ##進入頁面按f12 開啟偵錯刷新頁面

vue2與vue3中的生命週期執行順序有何不同

可以看出vue3中

setup
執行在beforeCreate與created前面；
onBeforeMount
執行在beforeMount前面；
執行在mounted前面;
點選更新name

vue2與vue3中的生命週期執行順序有何不同 #可以看出vue3中

執行在beforeUpdate前面；
執行在updated前面；
#點選切換child子元件的顯示

vue2與vue3中的生命週期執行順序有何不同 #可以看出vue3中

執行在beforeDestroy前面；
執行在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">
	<h2 id="message">{{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）建立階段：初始化事件，進行資料的觀測
########### new Vue({}) 建立一個空的實例對象，這個物件上只有生命週期函數和一些預設事件############在beforeCreate時，$el和data都未初始化#### #########created 執行，完成了對data的初始化，透過編譯將template 模板轉換成渲染函數( 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中的生命週期執行順序有何不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7844

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1241

Related knowledge

vue3專案中怎麼使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一個功能齊全的富文本編輯器插件，但在vue中引入tinymce並不像別的Vue富文本插件一樣那麼順利，tinymce本身並不適配Vue，還需要引入@tinymce/tinymce-vue，並且它是國外的富文本插件，沒有透過中文版本，需要在其官網下載翻譯包(可能需要翻牆)。 1.安裝相關依賴npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下載中文包3.引入皮膚和漢化包在項目public資料夾下新建tinymce資料夾，將下載的

Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

想要實現頁面的局部刷新，我們只需要實現局部元件（dom）的重新渲染。在Vue中，想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染，也可以新建一個空白元件，需要刷新局部頁面時跳轉至這個空白元件頁面，然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示，如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載，並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發，就會出現require引入圖片報錯，requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入，是因為typescript不支援require所以用import導入，下面介紹如何解決：使用awaitimport

Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue實作部落格前端，需要實作markdown的解析，如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked，程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下：一、安裝依賴庫在vue專案下開啟命令窗口，並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins

怎麼使用vue3+ts+axios+pinia實現無感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

前言無論是vue還是react，當我們遇到多處重複程式碼的時候，我們都會想著如何重複使用這些程式碼，而不是一個檔案裡充斥著一堆冗餘程式碼。實際上，vue和react都可以透過抽組件的方式來達到復用，但如果遇到一些很小的程式碼片段，你又不想抽到另外一個檔案的情況下，相比而言，react可以在相同文件裡面宣告對應的小元件，或透過renderfunction來實現，如：constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Vue3中怎麼實現選取頭像並裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的，如果時Vue2或想使用其他的方式引用，請訪問它的npm官方地址:官方教程。在元件中引用使用時也很簡單，只需要引入對應的元件和它的樣式文件，我這裡沒有在全域引用，只在我的元件檔案中引入import{userInfoByRequest}from'../js/api' import{VueCropper}from'vue-cropper&

vue3項目打包發佈到伺服器後訪問頁面顯示空白怎麼解決 May 17, 2023 am 08:19 AM

vue3專案打包發佈到伺服器後存取頁面顯示空白1、處理vue.config.js檔案中的publicPath處理如下：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&

See all articles

vue2與vue3中的生命週期執行順序有何不同

vue2與vue3中生命週期執行順序區別

生命週期比較

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

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題