VUE：生命周期
阿新 • • 發佈：2018-11-15
image 之路 生命 new pat 調用 before ajax請求 初始化
VUE：生命周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.vue對象的生命周期 1）初始化顯示 * beforeCreate() * created() * beforeMount() * mounted() 2）更新狀態：this.xxx=value * beforeUpdate() * updated() 3）銷毀Vue實例：vm.$destroy() * beforeDestroy() * destroyed() 2.常用的生命周期方法 mounted()：發送ajax請求，啟動定時器等異步任務 beforeDestory()：做收尾工作，如：清除定時器--> <div id="test"> <button @click="destoryVM">destory vm</button> <p v-show="isShow">濤先森的VUE自學之路</p> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:‘#test‘, data:{ isShow: true }, //1.----------初始化階段---------------- beforeCreate(){ console.log(‘正在調用beforeCreate方法...‘); }, created(){ console.log(‘正在調用created方法...‘); }, beforeMount(){ console.log(‘正在調用beforeMount方法...‘); }, //初始化顯示之後立即調用（1次） mounted(){ console.log(‘正在調用mountd方法...‘); this.intervalId=setInterval(()=>{ console.log(‘-------‘); this.isShow =! this.isShow },1000) }, //2.--------------更新階段----------------- beforeUpadte(){ console.log(‘正在調用beforeUpate方法...‘); }, updated(){ console.log(‘正在調用updated方法...‘); }, //生命周期回調函數（1次），死亡之後的為destoryed beforeDestroy(){ console.log(‘正在調用beforeDestroy方法...‘); //清楚定時器,避免內存泄漏 clearInterval(this.intervalId) }, //3.------------------死亡階段---------------- destroyed(){ console.log(‘正在調用destroyed方法...‘); }, methods:{ destoryVM(){ //幹掉 this.$destroy() } } }) </script> </body> </html>
生命周期圖
VUE：生命周期