Vue 生命周期记录_学习笔记
生活随笔
收集整理的這篇文章主要介紹了
Vue 生命周期记录_学习笔记
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?官方給出的設(shè)計(jì)圖入戲
?為了能更好的理解這個(gè)圖呢,寫了下面的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:"學(xué)習(xí)vue呢"},//在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。beforeCreate:function(){console.log('beforeCreate');},/* 在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè) (data observer)，屬性和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。 */created:function(){console.log('created');},//在掛載開始之前被調(diào)用：相關(guān)的渲染函數(shù)首次被調(diào)用LbeforeMount:function(){console.log('beforeMount');},//el 被新創(chuàng)建的 vm.$el 替換, 掛在成功 mounted:function(){console.log('mounted');},//數(shù)據(jù)更新時(shí)調(diào)用beforeUpdate : function(){console.log('beforeUpdate');},//組件 DOM 已經(jīng)更新, 組件更新完畢 updated : function(){console.log('updated');},beforeDestroy:function(){console.log('beforeDestroy');},destroyed:function(){console.log('destroyed');}});setTimeout(function(){vm.msg = "學(xué)習(xí)vue呢::::::::::::::::::"},3000);setTimeout(function(){vm.$destroy()},6000);</script>
</html>
剛才開走
間隔3s 后走了
間隔5s 后走了
總結(jié)
以上是生活随笔為你收集整理的Vue 生命周期记录_学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： life eater是谁画的啊？
- 下一篇： 真龙多少钱啊？