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，歡迎大家關注
