Vue生命周期示例詳解

更新時間：2017年04月12日 10:36:03 作者：淺白

這篇文章主要為大家詳細(xì)介紹了Vue生命周期的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

那么下面我們來進行測試一下

<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)
  }
 })

代碼如上，瀏覽器開始加載文件

由上圖可知：

　　1、beforeCreate 此時$el、data 的值都為undefined

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

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

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

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

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

　　觸發(fā)beforeUpdata 和updated

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue form表單動態(tài)添加組件實戰(zhàn)案例
這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
Vue router/Element重復(fù)點擊導(dǎo)航路由報錯問題及解決
這篇文章主要介紹了Vue router/Element重復(fù)點擊導(dǎo)航路由報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
element-plus 如何設(shè)置 el-date-picker 彈出框位置
el-date-picker 組件會自動根據(jù)空間范圍進行選擇比較好的彈出位置,但特定情況下,它自動計算出的彈出位置并不符合我們的實際需求,故需要我們手動設(shè)置,這篇文章主要介紹了element-plus 如何設(shè)置 el-date-picker 彈出框位置,需要的朋友可以參考下
2024-07-07
Vue3 diff算法之雙端diff算法詳解
雙端Diff在可以解決更多簡單Diff算法處理不了的場景，且比簡單Diff算法性能更好。本文將通過示例為大家詳細(xì)講講雙端diff算法的實現(xiàn)與使用，需要的可以參考一下
2022-09-09
vue的keep-alive中使用EventBus的方法
keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存，從而節(jié)省性能，由于是一個抽象組件，所以在頁面渲染完畢后不會被渲染成一個DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下
2019-04-04
vue3.2中的vuex使用詳解
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04
Vue項目環(huán)境搭建詳細(xì)總結(jié)
這篇文章主要為大家介紹了Vue項目環(huán)境搭建總結(jié)篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
vue2.0 如何把子組件的數(shù)據(jù)傳給父組件(推薦)
這篇文章主要介紹了vue2.0 如何把子組件的數(shù)據(jù)傳給父組件,需要的朋友可以參考下
2018-01-01
ejsExcel模板在Vue.js項目中的實際運用
這篇文章主要介紹了ejsExcel模板在Vue.js項目中的實際運用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Vue中跨域及打包部署到nginx跨域設(shè)置方法
這篇文章主要介紹了Vue中跨域以及打包部署到nginx跨域設(shè)置方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08