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>
4. 綜述
以上所述是小編給大家介紹的Vue3生命周期函數(shù)和方法詳解，希望對(duì)大家有所幫助。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Vue3生命周期鉤子函數(shù)詳解
- Vue3生命周期Hooks原理與調(diào)度器Scheduler關(guān)系
- vue2與vue3中生命周期執(zhí)行順序的區(qū)別說(shuō)明
- 深入了解vue2與vue3的生命周期對(duì)比
- vue3.0生命周期的示例代碼
- 理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理
- 一文搞懂Vue八大生命周期鉤子函數(shù)
- vue項(xiàng)目中輪詢狀態(tài)更改方式(鉤子函數(shù))
- VUE中的自定義指令鉤子函數(shù)講解
- vue3生命周期原理與生命周期函數(shù)簡(jiǎn)單應(yīng)用實(shí)例分析
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊圖片放大效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue 請(qǐng)求后臺(tái)數(shù)據(jù)的實(shí)例代碼
本篇文章主要介紹了vue 請(qǐng)求后臺(tái)數(shù)據(jù)的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧、2017-06-06
這篇文章主要介紹了vue.js層疊輪播效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解
這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項(xiàng)目框架的相關(guān)資料，對(duì)大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
本篇文章主要介紹了vue的一個(gè)分頁(yè)組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Vue實(shí)現(xiàn)二維碼數(shù)組的全選與反選功能
在開發(fā)Web應(yīng)用程序時(shí),表格數(shù)據(jù)的展示和操作是非常常見的需求之一,特別是在處理表格中的復(fù)選框選擇時(shí),我們經(jīng)常需要實(shí)現(xiàn)全選、反選等功能,這篇文章將帶你深入了解如何在Vue.js中實(shí)現(xiàn)對(duì)二維數(shù)組數(shù)據(jù)的全選和反選功能,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強(qiáng)大，文中給大家提到了功能點(diǎn),需要的朋友可以參考下2019-05-05
用vue設(shè)計(jì)一個(gè)數(shù)據(jù)采集器
這篇文章主要介紹了如何用vue設(shè)計(jì)一個(gè)數(shù)據(jù)采集器，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue-cli 3 全局過(guò)濾器的實(shí)例代碼詳解
這篇文章主要介紹了vue-cli 3 全局過(guò)濾器的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了深入理解vue的使用，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05