VUE3 之 生命週期函式

追風人聊Java發表於2021-12-12
Vue函式

1. 概述

老話說的好：天生我材必有用，千金散盡還復來。

 

言歸正傳，今天我們來聊一下 VUE 的生命週期函式。

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

 

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 的生命週期函式，希望可以對大家的工作有所幫助

歡迎幫忙點贊、評論、轉發、加關注 ：）

關注追風人聊Java，每天更新Java乾貨。

 

5. 個人公眾號

追風人聊Java，歡迎大家關注

 

相關文章