欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文搞懂Vue八大生命周期鉤子函數(shù)

 更新時間:2023年05月05日 11:15:47   作者:北極光之夜。  
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù),就是在某個時刻會自動執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來看看吧

一.速識概念:

  我們把一個對象從生成(new)到被銷毀(destory)的過程,稱為生命周期。而生命周期函數(shù),就是在某個時刻會自動執(zhí)行的函數(shù)。
  按照官方的原話,就是每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如,需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù),這給了用戶在不同階段添加自己的代碼的機會。
  簡單來說就是每個Vue實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程:創(chuàng)建實例,裝載模板,渲染模板等。Vue為生命周期中的每個狀態(tài)都設(shè)置了鉤子函數(shù)(監(jiān)聽函數(shù)) 。每當(dāng)Vue實例處于不同的生命周期時,對應(yīng)的函數(shù)就會被觸發(fā)調(diào)用。

二.八大生命周期鉤子函數(shù):

函數(shù)調(diào)用時間
beforeCreatevue實例初始化之前調(diào)用
createdvue實例初始化之后調(diào)用
beforeMount掛載到DOM樹之前調(diào)用
mounted掛載到DOM樹之后調(diào)用
beforeUpdate數(shù)據(jù)更新之前調(diào)用
updated數(shù)據(jù)更新之后調(diào)用
beforeDestroyvue實例銷毀之前調(diào)用
destroyedvue實例銷毀之后調(diào)用

下面是官方文檔里的生命周期圖,英語好的同學(xué)可以看看:

在這里插入圖片描述

三.結(jié)合代碼了解:

 先看案例基本代碼如下,后面通過如下代碼步驟演示一個對象從生成到被銷毀的過程各階段執(zhí)行的生命周期函數(shù)。注意show函數(shù)的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{information}}
    </div>
    <script type="text/javascript">
       //創(chuàng)建vue實例
       var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           }
       })
       // 各個生命周期函數(shù)通過調(diào)用下面這個函數(shù)了解其所處的生命階段
       function show(inf,obj){
          console.log(inf);
          console.log("------------------------------------------");
          console.log('獲取vue實例data里的數(shù)據(jù):');
          console.log(obj.information);
          console.log("------------------------------------------");
          console.log('掛載的對象,就是DOM:');
          console.log(obj.$el);
          console.log("------------------------------------------");
          console.log('頁面上已經(jīng)掛載的DOM:');
          console.log(document.getElementById('app').innerHTML);
       }

    </script>

1. beforeCreate:

 這個階段vue實例剛剛在內(nèi)存中創(chuàng)建,此時data和methods這些都沒初始化好。
 在案例中添加beforeCreate鉤子函數(shù):

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           beforeCreate: function(){
             // 傳入該階段簡介與this,this就是該階段的vue實例
                  show('vue實例初始化之前',this);
           }
       })

看運行結(jié)果:

在這里插入圖片描述

 可以看到,此時vue實例剛剛在內(nèi)存中創(chuàng)建,其它什么都undefined。

2.created:

 這個階段vue實例在內(nèi)存中已經(jīng)創(chuàng)建好了,data和methods也能夠獲取到了,但是模板還沒編譯。
 在案例中添加created鉤子函數(shù):

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           created: function(){
                  show('vue實例初始化之后',this);
           }
       })

看結(jié)果:

在這里插入圖片描述

看到?jīng)],已經(jīng)知道data里的數(shù)據(jù)了。其它的話都沒。

3.beforeMount:

 這個階段完成了模板的編譯,但是還沒掛載到頁面上。
 在案例中添加鉤子函數(shù):

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           beforeMount: function(){
             show('掛載之前',this);
           }
       })

看結(jié)果:

在這里插入圖片描述

看到?jīng)],要掛載的對象都編譯好了,但是頁面的DOM樹還沒掛上去,這個階段頁面還沒能顯示出來。

4.mounted:

 這個階段,模板編譯好了,也掛載到頁面中了,頁面也可以顯示了。
 在案例中添加鉤子函數(shù):

  var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
           mounted: function(){
            show('掛載之后',this);
           }
       })

看結(jié)果:

在這里插入圖片描述

5.beforeUpdate:

 轉(zhuǎn)態(tài)更新之前執(zhí)行此函數(shù),此時data中數(shù)據(jù)的狀態(tài)值已經(jīng)更新為最新的,但是頁面上顯示的數(shù)據(jù)還是最原始的,還沒有重新開始渲染DOM樹。

 先改變data里數(shù)據(jù):

vm.information = '南極光之夜';

 在案例中添加鉤子函數(shù):

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          beforeUpdate: function(){
            show('更新之前',this);
           }
       })

看結(jié)果:

在這里插入圖片描述

看到?jīng)],vue實例里的數(shù)據(jù)已經(jīng)變成了南極光之夜。但是此階段頁面DOM節(jié)點上顯示的還是初始的數(shù)據(jù)北極光之夜。

6.updated:

 這個階段是轉(zhuǎn)態(tài)更新完成后執(zhí)行此函數(shù),此時data中數(shù)據(jù)的狀態(tài)值是最新的,而且頁面上顯示的數(shù)據(jù)也是最新的,DOM節(jié)點已經(jīng)被重新渲染了。

 在案例中添加鉤子函數(shù):

  var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          updated: function(){
            show('更新之后',this);
           }
       })

看運行結(jié)果:

在這里插入圖片描述

更新了,全都更新了~

7.beforeDestroy:

 beforeDestroy階段處于vue實例被銷毀之前,當(dāng)然,這個階段vue實例還能用。

 銷毀Vue實例:

vm.$destroy();

 在案例中添加鉤子函數(shù):

 var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          beforeDestroy: function() {
            show('銷毀之前',this);
          }
       })

看效果:

在這里插入圖片描述

8.destroyed:

 這個階段在vue實例銷毀后調(diào)用,此時所有實例指示的所有東西都會解除綁定,事件監(jiān)聽器也都移除,子實例也被銷毀。

 在案例中添加鉤子函數(shù):

var vm = new Vue({
           el: '#app',
           data: {
               information: '北極光之夜。' 
           },
          destroyed: function() {
            show('銷毀之后',this);
          }
       })

看結(jié)果:

在這里插入圖片描述

到此這篇關(guān)于一文搞懂Vue八大生命周期鉤子函數(shù)的文章就介紹到這了,更多相關(guān)Vue八大生命周期鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決

    Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos

    這篇文章主要給大家介紹了關(guān)于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-03-03
  • vue3的基本使用方法詳細教程

    vue3的基本使用方法詳細教程

    這篇文章主要介紹了vue3的基本使用方法,結(jié)合實例形式詳細分析了vue3功能、組件、生命周期、TypeScript結(jié)合運用等相關(guān)概念與使用方法,需要的朋友可以參考下
    2023-06-06
  • vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析(面向新手)

    vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析(面向新手)

    這篇文章主要介紹了vue實現(xiàn)登錄頁面的驗證碼以及驗證過程解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-08-08
  • vue項目中使用qrcodesjs2生成二維碼簡單示例

    vue項目中使用qrcodesjs2生成二維碼簡單示例

    最近項目中需生成二維碼,發(fā)現(xiàn)了很好用的插件qrcodesjs2,所以下面這篇文章主要給大家介紹了關(guān)于vue項目中使用qrcodesjs2生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-05-05
  • vue接入ts基本方法

    vue接入ts基本方法

    這篇文章主要介紹了vue接入ts基本方法,關(guān)于ts,也出了很久,下面我們就來簡單學(xué)習(xí)了下ts并且在原有項目上接入基本ts語法,也算是一個初級嘗試,簡單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問題,供需要的小伙伴們參考
    2022-01-01
  • Vue.js雙向綁定實現(xiàn)原理詳解

    Vue.js雙向綁定實現(xiàn)原理詳解

    這篇文章主要為大家詳細介紹了Vue.js雙向綁定實現(xiàn)原理,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • vue echarts實現(xiàn)橫向柱狀圖

    vue echarts實現(xiàn)橫向柱狀圖

    這篇文章主要為大家詳細介紹了vue echarts實現(xiàn)橫向柱狀圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Spring Boot/VUE中路由傳遞參數(shù)的實現(xiàn)代碼

    Spring Boot/VUE中路由傳遞參數(shù)的實現(xiàn)代碼

    在路由時傳遞參數(shù),一般有兩種形式,一種是拼接在url地址中,另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下
    2018-03-03
  • vue前端開發(fā)層次嵌套組件的通信詳解

    vue前端開發(fā)層次嵌套組件的通信詳解

    vue通過provide & inject兩個關(guān)鍵字完成父組件向子孫組件直接傳值,很像子類能夠使用父類的屬性一樣方便。provide & inject一般用于多層之間的傳值,兩層之間還是使用props進行
    2021-10-10
  • vue組件props屬性監(jiān)聽不到值變化問題

    vue組件props屬性監(jiān)聽不到值變化問題

    這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04

最新評論