vue入門筆記體系（二）vue生命周期

scola666 發布于2019-08-23 10:30 / 2874人閱讀

摘要：此時還未有選項鉤子函數和間的生命周期完成后，會有一個判斷過程，判斷對象是否有選項。鉤子函數和鉤子函數間的生命周期當發現中的數據發生了改變，會觸發對應組件的重新渲染，先后調用和鉤子函數。和鉤子函數間的生命周期鉤子函數在實例銷毀之前調用。

vue生命周期

這是vue生命周期的圖示具體內容：

所有的生命周期鉤子函數如下：

beforeCreate() {
    console.log(this, "beforeCreate");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  created() {
    console.log(this, "created");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  beforeMount() {
    console.log(this, "beforeMount");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  mounted() {
    console.log(this, "beforeMount");
    console.log("el:"+this.$el)
    console.log("data:"+this.$data)
    console.log("text:"+this.text)
  },
  beforeUpdate() {
    console.log(this, "beforeUpdate");
  },
  updated() {
    console.log(this, "updated");
  },
  activated() {
    console.log(this, "activated");
  },
  deactivated() {
    console.log(this, "deactivated");
  },
  beforeDestroy() {
    console.log(this, "beforeDestroy");
  },
  destroyed() {
    console.log(this, "destroyed");
  },

打開控制臺可以看出：

一個實例被創建后上面的這四個鉤子函數按順序執行，這四個函數在這個過程只會被調用一次；
beforeUpdate、updated是數據更新的前后執行的；
beforeDestroy、destroyed是組件銷毀后執行的；
activated、deactivated是組件使用執行的，下面針對每個過程進行詳解：

1.beforeCreate

beforeCreate前面是初始化一個vue實例，此時，Events初始化完成，但data還未完成，所以此時不要修改數據；

2.created

created時，數據已經和data屬性進行綁定，這是最早進行ajax數據請求的地方。此時還未有el選項；

3.created鉤子函數和beforeMount間的生命周期

created完成后，會有一個判斷過程，判斷對象是否有el選項。如果有的話就繼續向下編譯，如果沒有el選項，則停止編譯，也就意味著停止了生命周期，直到在該vue實例上調用vm.$mount(el)。
如果有el選項后，會再次判斷是否有templete選項：
如果有的話中有template參數選項，則將其作為模板編譯成render函數。
如果沒有template選項，則將外部HTML作為模板編譯。
可以看到template中的模板優先級要高于outer HTML的優先級。

4.beforeMount和mounted 鉤子函數間的生命周期

此時已經掛載el選項，可以操作dom,至此，vue實例前四個生命周期執行完成。

5.beforeUpdate鉤子函數和updated鉤子函數間的生命周期

當vue發現data中的數據發生了改變，會觸發對應組件的重新渲染，先后調用beforeUpdate和updated鉤子函數。

6.beforeDestroy和destroyed鉤子函數間的生命周期

beforeDestroy鉤子函數在實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed鉤子函數在Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

另：activated：keep-alive組件激活時調用。該鉤子在服務器端渲染期間不被調用。

deactivated：keep-alive組件停用時調用。該鉤子在服務端渲染期間不被調用。

GPU云服務器云服務器 vue3 學習筆記 (五)——vue3 vue入門教程生命周期軟件生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96406.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
Java學習路線總結，搬磚工逆襲Java架構師（全網最強）

摘要：哪吒社區技能樹打卡打卡貼函數式接口簡介領域優質創作者哪吒公眾號作者架構師奮斗者掃描主頁左側二維碼，加入群聊，一起學習一起進步歡迎點贊收藏留言前情提要無意間聽到領導們的談話，現在公司的現狀是碼農太多，但能獨立帶隊的人太少，簡而言之，不缺干 ? 哪吒社區Java技能樹打卡?【打卡貼 day2...

Scorpion 2021-11-18 10:02 評論0 收藏0