vue必備的生命週期函數

生命週期函數

• 所有的vue組件,都是vue實例,一個組件對應一個實例,並且接收相同的選項對象(一些根實例特有的選項除外)
• 實例生命週期也叫:組件生命週期
• 組件 : 
  • 看做是一個個可複用的ui模塊
  • 組件本質上市一個vue實例

生命週期介紹

• 簡單說 : 一個組件(實例)從開始到最後消滅所經歷的各種狀態就是一個組件(實例)的生命週期
• 生命週期鉤子函數的定義:從組件被創建,到組件掛在頁面上運行,載到頁面關閉組件被銷燬,這三個階段總是總是伴隨着組件各種的事件,這些事件,統稱爲組件的生命週期函數(簡稱:鉤子函數)
• 開發人員可以通過vue提供的鉤子函數,讓我們寫的代碼參與到vue的生命週期中,讓我們的代碼在覈實的階段起到響應的作用

 注意 : 

1. 注意 : vue在執行過程中會  自動調用  生命週期鉤子函數  , 我們只需要提供這些鉤子函數即可
2. 注意 : 鉤子函數的名稱都是vue中規定好的

學習vue組件生命週期 學什麼?

1. Vue內部執行的流程(難)
2. 鉤子函數如何使用(兩個重要的鉤子函數  created  mounted) 

1.創建之前 - beforeCreate

• 說明 : 在實例初始化之前,數據觀測和 event/watch 事件配置之前被調用
• 組件實例剛被創建, 組件屬性計算之前, 例如 : data屬性  methods 屬性
• 注意 : 此時,無法獲取data中的數據和methods中的方法
• 場景 :幾乎不用

2. 創建 - created(掌握重點)

• 說明 : 組件實例創建完成,屬性已綁定, 可以調用 methods 中的方法 , 可以獲取data值
• [vue 實例生命週期 參考 1]
• [vue 實例生命週期 參考 2]
• 使用場景 : 1 - 發送ajax  2 - 本地存儲獲取數據  3 -  操作data裏的數據

• beforeCreate(){
      // 無法獲取數據和事件
      console.warn('beforeCreate',this.msg,this.fn)
  },
  created(){
      console.warn('created', this.msg,this.fn)
  }

   

有 ' el ' 選項嗎?

1.  YES => 就是正常的 el 邊界
2.  NO => 可以註釋,但是必須要手動添加 vm.$mount(el) 去指定邊界    vm.$mount('#app')

有 ' template ' 選項嗎?

1. NO => 將el 的 outerHtml 作爲模板進行編譯(outerHTML = 自身+ innerHTML )
2. YES =>

   // 如果提供了template , 那麼 vue就會將tempalte的內容進行編譯,編譯後,替換頁面中vue管理的邊界
   template : `<h1> 嘻嘻 </h1>`

    

3. 裝載之前 - beforeMounted() 

• 說明 : 在掛載開始之前被調用(掛載:可以理解爲DOM渲染)

4. 裝載 - mounted(掌握)

• 說明 : 掛載之後,DOM完成渲染
• 使用場景 : 1- 發送ajax請求  2 - 操作DOM

• 記得把template去掉
  // 渲染DOM之前 
  beforeMount(){
      // 渲染之前的<h1 id="h1" @click="fn">{{ msg }}</h1>
      consolg.log(document.querySelector('h1'))
  },
  // 渲染DOM之後 <h1>測試</h1>
  mounted(){
      console.log(document.querySelector('h1'))
  }

   

5. 更新之前 - beforeUpdated()

• 說明 : 數據更新時調用,發生在虛擬DOM重新渲染和打補丁之前,可以在這個鉤子中進一步的更改狀態,這不會觸發附加的重渲染過程
• 注意 : 此處獲取的數據是更新後的數據,但是獲取頁面中的DOM元素是更新之前的

小提示: 打印this.$el ,  打開小三角之後的,是應爲你打印是有監聽的功能,展示的是後面更改之後的

6. 更新 - updated()

• 說明: 組件DOM已經更新,所以你現在可以執行依賴於DOM的操作

• beforeUpdate(){
      // 更新之前的值 : 信息
      consolg.warn('beforeUpdate',document.querySelector('h1').innerText)
  },
  updated(){
      // 更新之後的值 : 信息111
      console.warn('updated',document.querySelector('h1').innerText)
  }

   

7. 銷燬之前 - beforeDestroy()

• 說明 : 實例銷燬之前調用 , 在這一步, 實例仍然完全可用
• 使用場景 : 實例銷燬之前,執行清除任務, 比如 : 清除定時器等

created(){
    this.timerId = setInterval(()=>{
        console.log(111)
    },500)
},
// 如果當組件銷燬了,還不清楚定時器,就會出現性能問題
// 在瀏覽器中可以嘗試銷燬  vm$destroy()
// 最後銷燬
beforeDestroy(){
    clearInterval(this.timerId)
}

 

8.  銷燬  -  destroyed()

說明 : Vue實例銷燬後調用.調用後,vue實例指示的所有東西會解綁,誰有的事件監聽會被移除,所有的子實例也會被銷燬

二. 使用鉤子函數來完善數據存儲(created創建)

created{
    this.list = JSON.parse(localStorage.getItem('list'))
}