當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue008_ Vue实例生命周期

發布時間：2024/2/28 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue008_ Vue实例生命周期小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

生命周期流程圖

vue ?生命周期分析

1) 初始化顯示
* beforeCreate()
* created()
* beforeMount()
* mounted()
2) 更新狀態: this.xxx = value
* beforeUpdate()
* updated()
3) 銷毀 vue 實例: vm.$destory()
* beforeDestory()
* destoryed()

常用的生命周期方法

1) created()/mounted(): 發送 ajax 請求, 啟動定時器等異步任務
2) beforeDestory(): 做收尾工作, 如: 清除定時器?

代碼展示

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div><button @click="destoryVue">destory vue</button><p v-show="isShowing">{{msg}}</p></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vue = new Vue({el: 'div',data: {msg: '京東集團',isShowing: true,},beforeCreate() {console.log('beforeCreate() msg=' + this.msg)},created() {console.log('created() msg=' + this.msg)this.intervalId = setInterval(() => {console.log('------')this.isShowing = !this.isShowing}, 1000)},beforeMount() {console.log('beforeMount() msg=' + this.msg)},mounted() {console.log('mounted() msg=' + this.msg)},beforeUpdate() {console.log('beforeUpdate isShowing=' + this.isShowing)},updated() {console.log('updated isShowing=' + this.isShowing)},beforeDestroy() {console.log('beforeDestroy() msg=' + this.msg)clearInterval(this.intervalId)},destroyed() {console.log('destroyed() msg=' + this.msg)},methods: {destoryVue() {vue.$destroy()}}})</script></body> </html>

結果展示

總結

以上是生活随笔為你收集整理的Vue008_ Vue实例生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。