當前位置：
首頁 >
Vue 生命周期记录_学习笔记
發布時間：2023/11/27
31
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Vue 生命周期记录_学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?官方給出的設計圖入戲
?為了能更好的理解這個圖呢,寫了下面的demo?
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="vue.js" type="text/javascript" charset="utf-8"></script><title>vue生命周期</title></head><body><div id="me">{{msg}}</div></body><script type="text/javascript">var vm = new Vue({el:"#me",data:{msg:"學習vue呢"},//在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。beforeCreate:function(){console.log('beforeCreate');},/* 在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。 */created:function(){console.log('created');},//在掛載開始之前被調用：相關的渲染函數首次被調用LbeforeMount:function(){console.log('beforeMount');},//el 被新創建的 vm.$el 替換, 掛在成功 mounted:function(){console.log('mounted');},//數據更新時調用beforeUpdate : function(){console.log('beforeUpdate');},//組件 DOM 已經更新, 組件更新完畢 updated : function(){console.log('updated');},beforeDestroy:function(){console.log('beforeDestroy');},destroyed:function(){console.log('destroyed');}});setTimeout(function(){vm.msg = "學習vue呢::::::::::::::::::"},3000);setTimeout(function(){vm.$destroy()},6000);</script>
</html>
剛才開走
間隔3s 后走了
間隔5s 后走了
總結
以上是生活随笔為你收集整理的Vue 生命周期记录_学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： life eater是谁画的啊？
- 下一篇： git user name is not