Vue3生命周期函數和方法詳解

Posted on by

 1. 概述

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

2. VUE3 生命周期函數介紹

2.1 beforeCreate

在 VUE 實例生成之前會自動執行的函數

2.2 created

在 VUE 實例生成之後會自動執行的函數

2.3 beforeMount

在組件內容被渲染到頁面之前自動執行的函數

2.4 mounted

在組件內容被渲染到頁面之後自動執行的函數

2.5 beforeUpdate

當data中的數據發生變化前執行的函數

2.6 updated

當data中的數據發生變化後執行的函數

2.7 beforeUnmount

VUE實例與元素解除綁定前執行的函數

2.8 unmounted

VUE實例與元素解除綁定後執行的函數

3. 代碼例子

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

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

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

    // 更新數據
    vm.$data.message = 'hello world!!!';

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

4. 綜述

以上所述是小編給大傢介紹的Vue3生命周期函數和方法詳解，希望對大傢有所幫助。在此也非常感謝大傢對WalkonNet網站的支持！

推薦閱讀：