溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue生命周期示例詳解

發(fā)布時(shí)間：2020-09-25 19:41:16 來(lái)源：腳本之家 閱讀：132 作者：淺白 欄目：web開(kāi)發(fā)

首先看看Vue文檔里關(guān)于實(shí)例生命周期的解釋圖

Vue生命周期示例詳解

那么下面我們來(lái)進(jìn)行測(cè)試一下

<section id="app-8">
 {{data}}
</section>
var myVue=new Vue({
  el:"#app-8",
  data:{
   data:"aaaaa",
   info:"nono"
  },
  beforeCreate:function(){
   console.log("創(chuàng)建前========")
   console.log(this.data)
   console.log(this.$el)
  },
  created:function(){
   console.log("已創(chuàng)建========")
   console.log(this.info)
   console.log(this.$el)
  },
  beforeMount:function(){
   console.log("mount之前========")
   console.log(this.info)
   console.log(this.$el)
  },
  mounted:function(){
   console.log("mounted========")
   console.log(this.info)
   console.log(this.$el)
  },
  beforeUpdate:function(){
   console.log("更新前========");

  },
  updated:function(){
   console.log("更新完成========");
  },
  beforeDestroy:function(){
   console.log("銷毀前========")
   console.log(this.info)
   console.log(this.$el)
  },
  destroyed:function(){
   console.log("已銷毀========")
   console.log(this.info)
   console.log(this.$el)
  }
 })

代碼如上，瀏覽器開(kāi)始加載文件

Vue生命周期示例詳解

Vue生命周期示例詳解

Vue生命周期示例詳解

由上圖可知：

　　1、beforeCreate 此時(shí)$el、data 的值都為undefined

　　2、創(chuàng)建之后，此時(shí)可以拿到data的值，但是$el依舊為undefined

　　3、mount之前，$el的值為“虛擬”的元素節(jié)點(diǎn)

　　4、mount之后，mounted之前，“虛擬”的dom節(jié)點(diǎn)被真實(shí)的dom節(jié)點(diǎn)替換，并將其插入到dom樹(shù)中，于是在觸發(fā)mounted時(shí)，可以獲取到$el為真實(shí)的dom元素()

　　myVue.$el===document.getElementById("app-8") // true

接著，在console中修改data，更新視圖

Vue生命周期示例詳解

　　觸發(fā)beforeUpdata 和updated

　　接著，執(zhí)行myVue.$destroy()

Vue生命周期示例詳解

總結(jié)一下，對(duì)官方文檔的那張圖簡(jiǎn)化一下，就得到了這張圖

Vue生命周期示例詳解

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手