前言

Hooks 都是一個一個 function，在生命週期中有些時刻發生了，就會去執行對應的 Hooks function！

建立階段

created hook 會初始化所有狀態和事件，所以在beforeCreate 中無法取得任何元件的內容。不論是 data 或是 methods 都無法取得!

ex:

export default {
   data() { 
     return { 
       val: 'hello'    
     }
   },
   beforeCreate() {     
     console.log('Value of val is: ' + this.val)   // undefined!!!
   }
}

使用場景例如:執行一些不需用到實體 data 屬性的邏輯或是 API。

接著進入 created().....屬性都綁定好了，但還沒掛載到 DOM 上。

// 使用和上面一樣的例子
export default {
   data() { 
     return { 
       val: 'hello'    
     }
   },
   created() {     
     console.log('Value of val is: ' + this.val)   // 印出 Value of val is: hello
   }
}

使用場景例如: 打完某隻 API 後需要儲存資料，就可在 created()中讀取/賦值給 data。

進到 Vue 3 使用 Composition API，beforeCreate 和 created 都改使用 setup()，代表原本寫在
beforeCreate 和 created的內容都改放在 setup 中！

ex:

import { ref } from 'vue'

export default {
   setup() {    
     const val = ref('hello') 
     console.log('Value of val is: ' + val.value)       
     return {         
       val
     }
   }
}

掛載階段

mounting hooks 處理元件的掛載和渲染，最最最最常見使用的 hooks ！

1. beforeMount() 和 onBeforeMount()

元件尚未渲染以及掛載，此時根元素也還不存在。

2. mounted() 和 onMounted()

在元件第一次渲染之後會被呼叫的 hooks，此時元素已經可以直接從 DOM 取得。
ex:

 // Composition API 使用 refs 取得 DOM
 import { ref, onMounted } from 'vue'
 

 export default {
   setup() {    /* Composition API */
 
     const root = ref(null)
 
     onMounted(() => {
       console.log(root.value)
     })
 

     return {
       root
     }
   },
   mounted() { /* Options API */
     console.log(this.$el)
   }
 } 

更新階段

當狀態被修改時，會觸發再次渲染

beforeUpdate() 和 onBeforeUpdate()

當資料改變，元件被重新渲染前！　在畫面改變前，適合在此處去手動更新 DOM，例如移除事件監聽
也可以用在追蹤元件是否被編輯或是追蹤事件去取消動作(例如:回復功能 undo)

updated() 和 onUpdated()

當 DOM 更新後會去呼叫 updated

ex:

 import { ref, onBeforeUpdate, onUpdated } from 'vue'
 
 export default {
   setup () {
     const count = ref(0)
     const val = ref(0)
 
     onBeforeUpdate(() => {
       count.value++;
       console.log("beforeUpdate");
     })
 
     onUpdated(() => {
       console.log("updated() val: " + val.value)
     })
 
     return {
       count, val
     }
   }
 } 

大部分時候，比較多會使用 watchers 去偵測資料是否改變，因為watchers 會提供資料更改前後的值。

生命週期未完待續．．．．．

每日一句:
每天的文章都在比短.....