快捷導(dǎo)航

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

更新時(shí)間：2021年12月12日 08:43:57 作者：追風(fēng)人聊Java

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

?1. 概述

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

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

2.1 beforeCreate

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

2.2 created

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

2.3 beforeMount

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

2.4 mounted

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

2.5 beforeUpdate

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

2.6 updated

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

2.7 beforeUnmount

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

2.8 unmounted

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

3. 代碼例子

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

    // 生命周期函數(shù)：在某一時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù)
    const app = Vue.createApp({     // 創(chuàng)建一個(gè)vue應(yīng)用實(shí)例
        data() {
            return {
                message : "hello"
            }
        },
        //在實(shí)例生成之前會(huì)自動(dòng)執(zhí)行的函數(shù)
        beforeCreate() {
            alert("beforeCreate")
        },
        //在實(shí)例生成之后會(huì)自動(dòng)執(zhí)行的函數(shù)
        created() {
            alert("created")
        },
        // 在組件內(nèi)容被渲染到頁(yè)面之前自動(dòng)執(zhí)行的函數(shù)
        beforeMount() {
            alert("beforeMount：" + document.getElementById("myDiv").innerHTML)
        },
        // 在組件內(nèi)容被渲染到頁(yè)面之后自動(dòng)執(zhí)行的函數(shù)
        mounted() { // 綁定后自動(dòng)執(zhí)行
            alert("mounted：" + document.getElementById("myDiv").innerHTML)
        },
        // 當(dāng)data中的數(shù)據(jù)發(fā)生變化前執(zhí)行
        beforeUpdate() {
            
            alert("beforeUpdate：" + document.getElementById("myDiv").innerHTML);
        },
        // 當(dāng)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);
        },
        // 如果沒(méi)有 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>