Vue3生命周期函數(shù)和方法詳解

更新時間：2021年12月12日 08:43:57 作者：追風人聊Java

本文詳細講解了Vue3生命周期函數(shù)和方法。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

?1. 概述

所謂生命周期函數(shù)，就是在某一條件下被自動觸發(fā)的函數(shù)。

2. VUE3 生命周期函數(shù)介紹

2.1 beforeCreate

在 VUE 實例生成之前會自動執(zhí)行的函數(shù)

2.2 created

在 VUE 實例生成之后會自動執(zhí)行的函數(shù)

2.3 beforeMount

在組件內(nèi)容被渲染到頁面之前自動執(zhí)行的函數(shù)

2.4 mounted

在組件內(nèi)容被渲染到頁面之后自動執(zhí)行的函數(shù)

2.5 beforeUpdate

當data中的數(shù)據(jù)發(fā)生變化前執(zhí)行的函數(shù)

2.6 updated

當data中的數(shù)據(jù)發(fā)生變化后執(zhí)行的函數(shù)

2.7 beforeUnmount

VUE實例與元素解除綁定前執(zhí)行的函數(shù)

2.8 unmounted

VUE實例與元素解除綁定后執(zhí)行的函數(shù)

3. 代碼例子

<script src="../vue.global.js"></script>
</head>
<body>
    <div id="myDiv"></div>
</body>
<script>

    // 生命周期函數(shù)：在某一時刻會自動執(zhí)行的函數(shù)
    const app = Vue.createApp({     // 創(chuàng)建一個vue應(yīng)用實例
        data() {
            return {
                message : "hello"
            }
        },
        //在實例生成之前會自動執(zhí)行的函數(shù)
        beforeCreate() {
            alert("beforeCreate")
        },
        //在實例生成之后會自動執(zhí)行的函數(shù)
        created() {
            alert("created")
        },
        // 在組件內(nèi)容被渲染到頁面之前自動執(zhí)行的函數(shù)
        beforeMount() {
            alert("beforeMount：" + document.getElementById("myDiv").innerHTML)
        },
        // 在組件內(nèi)容被渲染到頁面之后自動執(zhí)行的函數(shù)
        mounted() { // 綁定后自動執(zhí)行
            alert("mounted：" + document.getElementById("myDiv").innerHTML)
        },
        // 當data中的數(shù)據(jù)發(fā)生變化前執(zhí)行
        beforeUpdate() {
            
            alert("beforeUpdate：" + document.getElementById("myDiv").innerHTML);
        },
        // 當data中的數(shù)據(jù)發(fā)生變化后執(zhí)行
        updated() {
            alert("updated：" + document.getElementById("myDiv").innerHTML);
        },
        // 解除綁定前執(zhí)行的函數(shù)
        beforeUnmount() {
            alert("beforeUnmount：" + document.getElementById("myDiv").innerHTML);
        },
        // 解除綁定后執(zhí)行的函數(shù)
        unmounted() {
            alert("unmounted：" + document.getElementById("myDiv").innerHTML);
        },
        // 如果沒有 template ，則取綁定元素下面的子元素作為 template
        template : "<div>{{message}}</div>"
    });

    // vm 就是vue應(yīng)用的根組件
    const vm = app.mount('#myDiv');  // 綁定id為 myDiv 的元素

    // 更新數(shù)據(jù)
    vm.$data.message = 'hello world!!!';

    // 解除綁定
    app.unmount();
</script>